feat: add ResolutionOutputPanel with three-tab view, edit, and push
Three tabs: PSA Notes (FileText), KB Article (BookOpen), Client Summary (MessageSquare). Content area shows generated or edited text in monospace. Edit mode swaps in a textarea. Action bar: Edit, Copy to clipboard (with checkmark feedback), Push to PSA (disabled when already pushed). Uses resolutionsApi directly without a custom hook. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
239
frontend/src/components/session/ResolutionOutputPanel.tsx
Normal file
239
frontend/src/components/session/ResolutionOutputPanel.tsx
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react'
|
||||||
|
import { FileText, BookOpen, MessageSquare, Pencil, Copy, Send, Check } from 'lucide-react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { toast } from '@/lib/toast'
|
||||||
|
import { resolutionsApi } from '@/api/resolutions'
|
||||||
|
import type {
|
||||||
|
ResolutionOutputResponse,
|
||||||
|
ResolutionOutputType,
|
||||||
|
} from '@/types/branching'
|
||||||
|
|
||||||
|
interface Tab {
|
||||||
|
type: ResolutionOutputType
|
||||||
|
label: string
|
||||||
|
icon: React.ElementType
|
||||||
|
}
|
||||||
|
|
||||||
|
const TABS: Tab[] = [
|
||||||
|
{ type: 'psa_ticket_notes', label: 'PSA Notes', icon: FileText },
|
||||||
|
{ type: 'knowledge_base', label: 'KB Article', icon: BookOpen },
|
||||||
|
{ type: 'client_summary', label: 'Client Summary', icon: MessageSquare },
|
||||||
|
]
|
||||||
|
|
||||||
|
interface ResolutionOutputPanelProps {
|
||||||
|
sessionId: string
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutputPanelProps) {
|
||||||
|
const [outputs, setOutputs] = useState<ResolutionOutputResponse[]>([])
|
||||||
|
const [activeType, setActiveType] = useState<ResolutionOutputType>('psa_ticket_notes')
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [isEditing, setIsEditing] = useState(false)
|
||||||
|
const [editValue, setEditValue] = useState('')
|
||||||
|
const [isSaving, setIsSaving] = useState(false)
|
||||||
|
const [isPushing, setIsPushing] = useState(false)
|
||||||
|
const [copied, setCopied] = useState(false)
|
||||||
|
|
||||||
|
const loadOutputs = useCallback(async () => {
|
||||||
|
setIsLoading(true)
|
||||||
|
try {
|
||||||
|
const result = await resolutionsApi.getOutputs(sessionId)
|
||||||
|
setOutputs(result.outputs)
|
||||||
|
} catch {
|
||||||
|
toast.error('Failed to load resolution outputs')
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}, [sessionId])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadOutputs()
|
||||||
|
}, [loadOutputs])
|
||||||
|
|
||||||
|
const activeOutput = outputs.find(o => o.output_type === activeType) ?? null
|
||||||
|
const displayContent = activeOutput?.edited_content ?? activeOutput?.generated_content ?? ''
|
||||||
|
|
||||||
|
function handleTabChange(type: ResolutionOutputType) {
|
||||||
|
setActiveType(type)
|
||||||
|
setIsEditing(false)
|
||||||
|
setEditValue('')
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEditToggle() {
|
||||||
|
if (!isEditing) {
|
||||||
|
setEditValue(displayContent)
|
||||||
|
setIsEditing(true)
|
||||||
|
} else {
|
||||||
|
setIsEditing(false)
|
||||||
|
setEditValue('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSaveEdit() {
|
||||||
|
if (!activeOutput) return
|
||||||
|
setIsSaving(true)
|
||||||
|
try {
|
||||||
|
const updated = await resolutionsApi.editOutput(sessionId, activeOutput.id, {
|
||||||
|
edited_content: editValue,
|
||||||
|
})
|
||||||
|
setOutputs(prev => prev.map(o => (o.id === updated.id ? updated : o)))
|
||||||
|
setIsEditing(false)
|
||||||
|
setEditValue('')
|
||||||
|
toast.success('Output saved')
|
||||||
|
} catch {
|
||||||
|
toast.error('Failed to save edit')
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleCopy() {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(displayContent)
|
||||||
|
setCopied(true)
|
||||||
|
setTimeout(() => setCopied(false), 2000)
|
||||||
|
} catch {
|
||||||
|
toast.error('Failed to copy to clipboard')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handlePushToPsa() {
|
||||||
|
if (!activeOutput) return
|
||||||
|
setIsPushing(true)
|
||||||
|
try {
|
||||||
|
const updated = await resolutionsApi.pushOutput(sessionId, activeOutput.id, {
|
||||||
|
destination: 'psa',
|
||||||
|
})
|
||||||
|
setOutputs(prev => prev.map(o => (o.id === updated.id ? updated : o)))
|
||||||
|
toast.success('Pushed to PSA')
|
||||||
|
} catch {
|
||||||
|
toast.error('Failed to push to PSA')
|
||||||
|
} finally {
|
||||||
|
setIsPushing(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn('flex flex-col bg-card border border-default rounded-lg overflow-hidden', className)}>
|
||||||
|
{/* Tab bar */}
|
||||||
|
<div className="flex border-b border-default shrink-0">
|
||||||
|
{TABS.map(tab => {
|
||||||
|
const Icon = tab.icon
|
||||||
|
const isActive = tab.type === activeType
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tab.type}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleTabChange(tab.type)}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px',
|
||||||
|
isActive
|
||||||
|
? 'border-accent text-accent-text'
|
||||||
|
: 'border-transparent text-secondary hover:text-primary hover:border-hover'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon size={13} />
|
||||||
|
<span>{tab.label}</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 overflow-auto p-3 min-h-0">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center h-24">
|
||||||
|
<span className="text-xs text-muted">Loading…</span>
|
||||||
|
</div>
|
||||||
|
) : !activeOutput ? (
|
||||||
|
<div className="flex items-center justify-center h-24">
|
||||||
|
<span className="text-xs text-muted">No output generated yet.</span>
|
||||||
|
</div>
|
||||||
|
) : isEditing ? (
|
||||||
|
<textarea
|
||||||
|
value={editValue}
|
||||||
|
onChange={e => setEditValue(e.target.value)}
|
||||||
|
className={cn(
|
||||||
|
'w-full h-full min-h-[160px] resize-none rounded-[5px] border border-default bg-input',
|
||||||
|
'px-3 py-2 text-sm text-primary font-mono leading-relaxed',
|
||||||
|
'focus:outline-none focus:border-accent focus:shadow-[0_0_0_2px_var(--color-accent-dim)]',
|
||||||
|
'transition-colors'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<pre className="text-sm text-primary font-mono whitespace-pre-wrap leading-relaxed">
|
||||||
|
{displayContent}
|
||||||
|
</pre>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action bar */}
|
||||||
|
<div className="flex items-center gap-2 px-3 py-2.5 border-t border-default shrink-0">
|
||||||
|
{isEditing ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSaveEdit}
|
||||||
|
disabled={isSaving}
|
||||||
|
className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-[#ea580c] transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isSaving ? 'Saving…' : 'Save'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleEditToggle}
|
||||||
|
disabled={isSaving}
|
||||||
|
className="rounded-[5px] border border-default px-3 py-1.5 text-xs text-secondary hover:bg-elevated hover:text-primary transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleEditToggle}
|
||||||
|
disabled={!activeOutput}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-secondary',
|
||||||
|
'hover:bg-elevated hover:text-primary transition-colors disabled:opacity-40'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Pencil size={12} />
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleCopy}
|
||||||
|
disabled={!activeOutput}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
|
||||||
|
copied
|
||||||
|
? 'border-[#34d399] text-[#34d399]'
|
||||||
|
: 'text-secondary hover:bg-elevated hover:text-primary'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{copied ? <Check size={12} /> : <Copy size={12} />}
|
||||||
|
{copied ? 'Copied' : 'Copy'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handlePushToPsa}
|
||||||
|
disabled={!activeOutput || isPushing || activeOutput.status === 'pushed'}
|
||||||
|
className={cn(
|
||||||
|
'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
|
||||||
|
activeOutput?.status === 'pushed'
|
||||||
|
? 'border-[#34d399] text-[#34d399]'
|
||||||
|
: 'text-secondary hover:bg-elevated hover:text-primary'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Send size={12} />
|
||||||
|
{isPushing ? 'Pushing…' : activeOutput?.status === 'pushed' ? 'Pushed' : 'Push to PSA'}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user