chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(evidence): add RichTextInput with clipboard paste and wire into FlowPilot

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-20 03:31:03 +00:00
parent f87f3d47de
commit 1d5454c31b
6 changed files with 313 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
frontend/src/components/common/RichTextInput.tsx Normal file
View File

@@ -0,0 +1,285 @@
import { useState, useRef, useEffect, useCallback } from 'react'
import { Loader2, X, RotateCcw, ImagePlus } from 'lucide-react'
import { cn } from '@/lib/utils'
import { uploadsApi } from '@/api/uploads'
import type { FileUploadResponse, PendingUpload } from '@/types/upload'
interface RichTextInputProps {
value: string
onChange: (value: string) => void
onFilesChange?: (uploads: FileUploadResponse[]) => void
sessionId?: string
placeholder?: string
rows?: number
className?: string
disabled?: boolean
}
export function RichTextInput({
value,
onChange,
onFilesChange,
sessionId,
placeholder,
rows = 3,
className,
disabled,
}: RichTextInputProps) {
const [pendingUploads, setPendingUploads] = useState<PendingUpload[]>([])
const [isDragOver, setIsDragOver] = useState(false)
const [isFocused, setIsFocused] = useState(false)
const textareaRef = useRef<HTMLTextAreaElement>(null)
const dragCounterRef = useRef(0)
// Cleanup blob URLs on unmount
useEffect(() => {
return () => {
pendingUploads.forEach((upload) => {
URL.revokeObjectURL(upload.preview)
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const processFiles = useCallback(
(files: File[]) => {
const imageFiles = files.filter((f) => f.type.startsWith('image/'))
if (imageFiles.length === 0) return
const newUploads: PendingUpload[] = imageFiles.map((file) => ({
id: crypto.randomUUID(),
file,
preview: URL.createObjectURL(file),
status: 'uploading' as const,
}))
setPendingUploads((prev) => [...prev, ...newUploads])
// Upload each file
newUploads.forEach((upload) => {
uploadsApi
.upload(upload.file, sessionId)
.then((result) => {
setPendingUploads((prev) => {
const updated = prev.map((u) =>
u.id === upload.id ? { ...u, status: 'done' as const, result } : u
)
// Notify parent of all completed uploads
const completed = updated
.filter((u) => u.status === 'done' && u.result)
.map((u) => u.result!)
onFilesChange?.(completed)
return updated
})
})
.catch((err) => {
setPendingUploads((prev) =>
prev.map((u) =>
u.id === upload.id
? { ...u, status: 'error' as const, error: err?.message || 'Upload failed' }
: u
)
)
})
})
},
[sessionId, onFilesChange]
)
const handlePaste = useCallback(
(e: React.ClipboardEvent<HTMLTextAreaElement>) => {
if (disabled) return
const items = e.clipboardData?.items
if (!items) return
const imageFiles: File[] = []
for (let i = 0; i < items.length; i++) {
const item = items[i]
if (item.type.startsWith('image/')) {
const file = item.getAsFile()
if (file) imageFiles.push(file)
}
}
if (imageFiles.length > 0) {
e.preventDefault()
processFiles(imageFiles)
}
},
[disabled, processFiles]
)
const handleDragOver = useCallback(
(e: React.DragEvent) => {
if (disabled) return
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
[disabled]
)
const handleDragEnter = useCallback(
(e: React.DragEvent) => {
if (disabled) return
e.preventDefault()
dragCounterRef.current++
if (dragCounterRef.current === 1) {
setIsDragOver(true)
}
},
[disabled]
)
const handleDragLeave = useCallback(
(e: React.DragEvent) => {
e.preventDefault()
dragCounterRef.current--
if (dragCounterRef.current === 0) {
setIsDragOver(false)
}
},
[]
)
const handleDrop = useCallback(
(e: React.DragEvent) => {
if (disabled) return
e.preventDefault()
dragCounterRef.current = 0
setIsDragOver(false)
const files = Array.from(e.dataTransfer.files)
processFiles(files)
},
[disabled, processFiles]
)
const handleRemove = useCallback(
(uploadId: string) => {
setPendingUploads((prev) => {
const toRemove = prev.find((u) => u.id === uploadId)
if (toRemove) {
URL.revokeObjectURL(toRemove.preview)
}
const updated = prev.filter((u) => u.id !== uploadId)
const completed = updated
.filter((u) => u.status === 'done' && u.result)
.map((u) => u.result!)
onFilesChange?.(completed)
return updated
})
},
[onFilesChange]
)
const retryUpload = useCallback(
(uploadId: string) => {
setPendingUploads((prev) =>
prev.map((u) => (u.id === uploadId ? { ...u, status: 'uploading' as const, error: undefined } : u))
)
const upload = pendingUploads.find((u) => u.id === uploadId)
if (!upload) return
uploadsApi
.upload(upload.file, sessionId)
.then((result) => {
setPendingUploads((prev) => {
const updated = prev.map((u) =>
u.id === uploadId ? { ...u, status: 'done' as const, result } : u
)
const completed = updated
.filter((u) => u.status === 'done' && u.result)
.map((u) => u.result!)
onFilesChange?.(completed)
return updated
})
})
.catch((err) => {
setPendingUploads((prev) =>
prev.map((u) =>
u.id === uploadId
? { ...u, status: 'error' as const, error: err?.message || 'Upload failed' }
: u
)
)
})
},
[pendingUploads, sessionId, onFilesChange]
)
return (
<div
className={cn('relative', className)}
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<textarea
ref={textareaRef}
value={value}
onChange={(e) => onChange(e.target.value)}
onPaste={handlePaste}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
placeholder={placeholder}
rows={rows}
disabled={disabled}
className={cn(
'w-full bg-card border border-border rounded-xl p-3 text-sm text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none transition-colors',
isDragOver && 'border-primary/50 bg-primary/5',
disabled && 'opacity-50 cursor-not-allowed'
)}
/>
{/* Drag overlay hint */}
{isDragOver && (
<div className="absolute inset-0 flex items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
<div className="flex items-center gap-2 text-sm text-primary">
<ImagePlus size={16} />
Drop image to attach
</div>
</div>
)}
{/* Thumbnail strip */}
{pendingUploads.length > 0 && (
<div className="flex gap-2 flex-wrap mt-2">
{pendingUploads.map((upload) => (
<div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-border">
<img src={upload.preview} alt="" className="w-full h-full object-cover" />
{upload.status === 'uploading' && (
<div className="absolute inset-0 bg-background/50 flex items-center justify-center">
<Loader2 size={16} className="animate-spin text-primary" />
</div>
)}
{upload.status === 'done' && (
<button
onClick={() => handleRemove(upload.id)}
className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background/80 border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
>
<X size={10} className="text-muted-foreground" />
</button>
)}
{upload.status === 'error' && (
<div
className="absolute inset-0 bg-rose-500/20 border-2 border-rose-500 flex items-center justify-center cursor-pointer"
onClick={() => retryUpload(upload.id)}
>
<RotateCcw size={14} className="text-rose-500" />
</div>
)}
</div>
))}
</div>
)}
{/* Paste hint */}
{isFocused && !value && pendingUploads.length === 0 && (
<p className="text-[0.625rem] text-muted-foreground/50 mt-1">Paste screenshots with Ctrl+V</p>
)}
</div>
)
}

14
frontend/src/components/flowpilot/EscalateModal.tsx
View File

@@ -1,7 +1,9 @@
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
@@ -9,10 +11,12 @@ interface EscalateModalProps {
onEscalate: (data: EscalateSessionRequest) => Promise<unknown>
isProcessing: boolean
hasPsaTicket: boolean
sessionId?: string
}
export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaTicket }: EscalateModalProps) {
export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaTicket, sessionId }: EscalateModalProps) {
const [reason, setReason] = useState('')
const [_escalateUploads, setEscalateUploads] = useState<FileUploadResponse[]>([])
const handleSubmit = async () => {
if (!reason.trim() || reason.trim().length < 5) return
@@ -42,13 +46,13 @@ export function EscalateModal({ open, onClose, onEscalate, isProcessing, hasPsaT
<label className="mb-1.5 block text-sm font-medium text-foreground">
Why are you escalating?
</label>
<textarea
<RichTextInput
value={reason}
onChange={(e) => setReason(e.target.value)}
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..."
className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
rows={4}
autoFocus
/>
<p className="mt-1 text-[0.625rem] text-[#5a6170]">
Minimum 5 characters. This will be shown to the engineer who picks up.

3
frontend/src/components/flowpilot/FlowPilotActionBar.tsx
View File

@@ -8,6 +8,7 @@ interface FlowPilotActionBarProps {
canEscalate: boolean
isProcessing: boolean
hasPsaTicket?: boolean
sessionId?: string
onResolve: (data: ResolveSessionRequest) => Promise<SessionDocumentation>
onEscalate: (data: EscalateSessionRequest) => Promise<SessionDocumentation>
onPause?: () => Promise<void>
@@ -18,6 +19,7 @@ export function FlowPilotActionBar({
canEscalate,
isProcessing,
hasPsaTicket = false,
sessionId,
onResolve,
onEscalate,
onPause,
@@ -126,6 +128,7 @@ export function FlowPilotActionBar({
onEscalate={onEscalate}
isProcessing={isProcessing || submitting}
hasPsaTicket={hasPsaTicket}
sessionId={sessionId}
/>
</>
)

18
frontend/src/components/flowpilot/FlowPilotIntake.tsx
View File

@@ -1,9 +1,11 @@
import { useState, useEffect } from 'react'
import { Sparkles, FileText, Terminal, X, AlertTriangle } from 'lucide-react'
import { TicketPickerModal } from '@/components/session/TicketPickerModal'
import { RichTextInput } from '@/components/common/RichTextInput'
import { integrationsApi } from '@/api/integrations'
import type { AISessionCreateRequest } from '@/types/ai-session'
import type { PSATicketInfo, PsaConnectionResponse } from '@/types/integrations'
import type { FileUploadResponse } from '@/types/upload'
interface FlowPilotIntakeProps {
onSubmit: (request: AISessionCreateRequest) => void
@@ -20,6 +22,9 @@ export function FlowPilotIntake({ onSubmit, isLoading }: FlowPilotIntakeProps) {
const [psaConnection, setPsaConnection] = useState<PsaConnectionResponse | null>(null)
const [psaChecked, setPsaChecked] = useState(false)
// Upload state (no session_id yet — uploads linked later)
const [_intakeUploads, setIntakeUploads] = useState<FileUploadResponse[]>([])
// Selected ticket state
const [selectedTicket, setSelectedTicket] = useState<PSATicketInfo | null>(null)
const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null)
@@ -168,19 +173,12 @@ export function FlowPilotIntake({ onSubmit, isLoading }: FlowPilotIntakeProps) {
{/* Main text area (hidden when ticket is selected) */}
{!selectedTicket && (
<textarea
<RichTextInput
value={text}
onChange={(e) => setText(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
if (text.trim() || logContent.trim()) handleSubmit()
}
}}
onChange={setText}
onFilesChange={setIntakeUploads}
placeholder="e.g. User can't access shared drive after password reset, getting 'Access Denied' in Event Viewer..."
className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
rows={5}
autoFocus
/>
)}

1
frontend/src/components/flowpilot/FlowPilotSession.tsx
View File

@@ -302,6 +302,7 @@ export function FlowPilotSession({
canEscalate={canEscalate}
isProcessing={isProcessing}
hasPsaTicket={!!session.psa_ticket_id}
sessionId={session.id}
onResolve={onResolve}
onEscalate={onEscalate}
onPause={onPause}

11
frontend/src/components/flowpilot/FlowPilotStepCard.tsx
View File

@@ -2,7 +2,9 @@ import { useState } from 'react'
import { MessageSquare, Zap, CheckCircle2, SkipForward, ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { AISessionStepResponse, StepResponseRequest } from '@/types/ai-session'
import type { FileUploadResponse } from '@/types/upload'
import { MarkdownContent } from '@/components/ui/MarkdownContent'
import { RichTextInput } from '@/components/common/RichTextInput'
import { FlowPilotOptions } from './FlowPilotOptions'
import { InSessionScriptGenerator } from './InSessionScriptGenerator'
@@ -28,6 +30,7 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
const [freeText, setFreeText] = useState('')
const [showFreeText, setShowFreeText] = useState(false)
const [isCollapsed, setIsCollapsed] = useState(!isCurrentStep)
const [_freeTextUploads, setFreeTextUploads] = useState<FileUploadResponse[]>([])
const content = step.content as Record<string, unknown>
const stepText = (content.text as string) || ''
@@ -206,13 +209,13 @@ export function FlowPilotStepCard({ step, isCurrentStep, isProcessing, sessionId
</button>
) : (
<div className="space-y-2">
<textarea
<RichTextInput
value={freeText}
onChange={(e) => setFreeText(e.target.value)}
onChange={setFreeText}
onFilesChange={setFreeTextUploads}
sessionId={sessionId}
placeholder="Describe what you're seeing..."
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
rows={3}
autoFocus
/>
<div className="flex gap-2">
<button