165e402284
Remove duplicate Update/Close actions from chat toolbars (FlowPilotPage, CockpitPage) — session lifecycle actions now live only in headers. Redesign ViewToggle as a persistent tab bar with bottom-border active indicator and ARIA attributes. Standardize all action naming: Resolve (emerald), Update (blue), Close (rose), Pause (muted). Fix IncidentHeader Resolve from orange to emerald. Delete unused FlowPilotActionBar component (227 lines). Update ConcludeSessionModal copy to use forward-facing action verbs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
592 lines
29 KiB
TypeScript
592 lines
29 KiB
TypeScript
import { useState, useRef, useCallback, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Sparkles, Send, Loader2, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, GripHorizontal } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { PageMeta } from '@/components/common/PageMeta'
|
|
import { aiSessionsApi } from '@/api/aiSessions'
|
|
import { ChatSidebar, ChatSidebarCollapsedBar } from '@/components/assistant/ChatSidebar'
|
|
import { ConcludeSessionModal } from '@/components/assistant/ConcludeSessionModal'
|
|
import { StatusUpdateModal } from '@/components/flowpilot/StatusUpdateModal'
|
|
import { IncidentHeader } from '@/components/assistant/IncidentHeader'
|
|
import { StepsPanel } from '@/components/assistant/StepsPanel'
|
|
import { FlowPilotAsks } from '@/components/assistant/FlowPilotAsks'
|
|
import { WhatWeKnow } from '@/components/assistant/WhatWeKnow'
|
|
import { ViewToggle } from '@/components/assistant/ViewToggle'
|
|
import { useAssistantSession } from '@/hooks/useAssistantSession'
|
|
import { useFeatureFlag } from '@/hooks/useFeatureFlag'
|
|
import type { TriageMeta, EvidenceItem, TriageUpdate } from '@/types/ai-session'
|
|
|
|
export default function CockpitPage() {
|
|
const navigate = useNavigate()
|
|
const hasCockpit = useFeatureFlag('flowpilot_cockpit')
|
|
const session = useAssistantSession()
|
|
|
|
// ── Cockpit-specific state ──
|
|
const [triageMeta, setTriageMeta] = useState<TriageMeta>({
|
|
client_name: null, asset_name: null, issue_category: null,
|
|
triage_hypothesis: null, evidence_items: [],
|
|
})
|
|
const [psaTicketId, setPsaTicketId] = useState<string | null>(null)
|
|
const [workZonePct, setWorkZonePct] = useState(() => {
|
|
const saved = localStorage.getItem('rf-assistant-work-zone-height')
|
|
return saved ? parseFloat(saved) : 55
|
|
})
|
|
const [activeStepIndex, setActiveStepIndex] = useState(0)
|
|
const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
|
|
const [showOnboarding, setShowOnboarding] = useState(() =>
|
|
!localStorage.getItem('rf-cockpit-onboarded')
|
|
)
|
|
const splitContainerRef = useRef<HTMLDivElement>(null)
|
|
const prevMessageCountRef = useRef(session.messages.length)
|
|
|
|
const dismissOnboarding = () => {
|
|
setShowOnboarding(false)
|
|
localStorage.setItem('rf-cockpit-onboarded', '1')
|
|
}
|
|
|
|
// ── Feature flag redirect ──
|
|
useEffect(() => {
|
|
if (!hasCockpit && session.activeChatId) {
|
|
navigate(`/assistant/${session.activeChatId}`, { replace: true })
|
|
} else if (!hasCockpit) {
|
|
navigate('/assistant', { replace: true })
|
|
}
|
|
}, [hasCockpit, session.activeChatId, navigate])
|
|
|
|
// ── Wire triage data from session loads ──
|
|
useEffect(() => {
|
|
session.onSessionLoadedRef.current = (detail) => {
|
|
setTriageMeta({
|
|
client_name: detail.client_name ?? null,
|
|
asset_name: detail.asset_name ?? null,
|
|
issue_category: detail.issue_category ?? null,
|
|
triage_hypothesis: detail.triage_hypothesis ?? null,
|
|
evidence_items: (detail.evidence_items as EvidenceItem[]) ?? [],
|
|
})
|
|
setPsaTicketId(detail.psa_ticket_id ?? null)
|
|
}
|
|
return () => { session.onSessionLoadedRef.current = null }
|
|
}, [session.onSessionLoadedRef])
|
|
|
|
// ── Wire triage updates from AI responses ──
|
|
useEffect(() => {
|
|
session.onTriageUpdateRef.current = mergeTriageUpdate
|
|
return () => { session.onTriageUpdateRef.current = null }
|
|
}, [session.onTriageUpdateRef]) // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
// ── Handle prefill from command palette / dashboard handoff ──
|
|
useEffect(() => {
|
|
session.handlePrefill('/cockpit')
|
|
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
// ── Dismiss onboarding when first message is sent ──
|
|
useEffect(() => {
|
|
if (showOnboarding && session.messages.length > prevMessageCountRef.current) {
|
|
dismissOnboarding()
|
|
}
|
|
prevMessageCountRef.current = session.messages.length
|
|
}, [session.messages.length, showOnboarding])
|
|
|
|
// Reset all cockpit-local state when switching cases.
|
|
// Triage data gets repopulated via onSessionLoadedRef after the async fetch.
|
|
useEffect(() => {
|
|
setActiveStepIndex(0)
|
|
setCompletedSteps(new Set())
|
|
setTriageMeta({
|
|
client_name: null, asset_name: null, issue_category: null,
|
|
triage_hypothesis: null, evidence_items: [],
|
|
})
|
|
setPsaTicketId(null)
|
|
}, [session.activeChatId])
|
|
|
|
// Reset step UI when a new action set arrives from AI.
|
|
useEffect(() => {
|
|
setActiveStepIndex(0)
|
|
setCompletedSteps(new Set())
|
|
}, [session.activeActions])
|
|
|
|
// ── Triage handlers ──
|
|
|
|
const handleTriageFieldSave = useCallback(async (field: keyof TriageMeta, value: string) => {
|
|
if (!session.activeChatId) return
|
|
try {
|
|
await aiSessionsApi.updateTriage(session.activeChatId, { [field]: value })
|
|
setTriageMeta(prev => ({ ...prev, [field]: value }))
|
|
} catch {
|
|
// best-effort — toast handled by caller if needed
|
|
}
|
|
}, [session.activeChatId])
|
|
|
|
const handleEvidenceAdd = useCallback(async (text: string, status: EvidenceItem['status']) => {
|
|
const newItem: EvidenceItem = { text, status }
|
|
let updated: EvidenceItem[] = []
|
|
setTriageMeta(prev => {
|
|
updated = [...prev.evidence_items, newItem]
|
|
return { ...prev, evidence_items: updated }
|
|
})
|
|
if (session.activeChatId) {
|
|
try { await aiSessionsApi.updateTriage(session.activeChatId, { evidence_items: updated }) } catch { /* best-effort */ }
|
|
}
|
|
}, [session.activeChatId])
|
|
|
|
const handleEvidenceEdit = useCallback(async (index: number, text: string, status: EvidenceItem['status']) => {
|
|
let updated: EvidenceItem[] = []
|
|
setTriageMeta(prev => {
|
|
updated = prev.evidence_items.map((item, i) => i === index ? { text, status } : item)
|
|
return { ...prev, evidence_items: updated }
|
|
})
|
|
if (session.activeChatId) {
|
|
try { await aiSessionsApi.updateTriage(session.activeChatId, { evidence_items: updated }) } catch { /* best-effort */ }
|
|
}
|
|
}, [session.activeChatId])
|
|
|
|
const handleStepComplete = useCallback((index: number) => {
|
|
setCompletedSteps(prev => {
|
|
const next = new Set(prev)
|
|
next.add(index)
|
|
// Auto-advance using the updated set (avoids stale closure)
|
|
const nextIncomplete = session.activeActions.findIndex((_, i) => i > index && !next.has(i))
|
|
if (nextIncomplete !== -1) {
|
|
setActiveStepIndex(nextIncomplete)
|
|
} else if (index + 1 < session.activeActions.length) {
|
|
setActiveStepIndex(index + 1)
|
|
}
|
|
return next
|
|
})
|
|
}, [session.activeActions])
|
|
|
|
const handleStepSelect = useCallback((index: number) => {
|
|
setActiveStepIndex(index)
|
|
}, [])
|
|
|
|
// Merge triage_update from AI response into local state
|
|
const mergeTriageUpdate = useCallback((update: TriageUpdate) => {
|
|
setTriageMeta(prev => {
|
|
const merged = { ...prev }
|
|
// AI only fills null fields (manual edits win)
|
|
if (update.client_name && !prev.client_name) merged.client_name = update.client_name
|
|
if (update.asset_name && !prev.asset_name) merged.asset_name = update.asset_name
|
|
if (update.issue_category && !prev.issue_category) merged.issue_category = update.issue_category
|
|
if (update.triage_hypothesis && !prev.triage_hypothesis) merged.triage_hypothesis = update.triage_hypothesis
|
|
// Append new evidence items
|
|
if (update.evidence_items && update.evidence_items.length > 0) {
|
|
merged.evidence_items = [...prev.evidence_items, ...update.evidence_items]
|
|
}
|
|
return merged
|
|
})
|
|
}, [])
|
|
|
|
// Drag handle for work zone / chat split
|
|
const handleDragStart = useCallback((e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
const container = splitContainerRef.current
|
|
if (!container) return
|
|
const rect = container.getBoundingClientRect()
|
|
const onMove = (ev: MouseEvent) => {
|
|
const pct = ((ev.clientY - rect.top) / rect.height) * 100
|
|
const clamped = Math.max(25, Math.min(75, pct))
|
|
setWorkZonePct(clamped)
|
|
}
|
|
const onUp = () => {
|
|
document.removeEventListener('mousemove', onMove)
|
|
document.removeEventListener('mouseup', onUp)
|
|
setWorkZonePct(prev => { localStorage.setItem('rf-assistant-work-zone-height', String(prev)); return prev })
|
|
}
|
|
document.addEventListener('mousemove', onMove)
|
|
document.addEventListener('mouseup', onUp)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<PageMeta title="FlowPilot" />
|
|
<div className="flex h-[calc(100vh-3.5rem)]">
|
|
{/* Sidebar — hidden on mobile, collapsed to top bar or full sidebar on desktop */}
|
|
{!session.sidebarCollapsed && (
|
|
<div className="hidden sm:block">
|
|
<ChatSidebar
|
|
chats={session.chats}
|
|
activeChatId={session.activeChatId}
|
|
onSelectChat={session.selectChat}
|
|
onNewChat={session.handleNewChat}
|
|
onDeleteChat={session.handleDeleteChat}
|
|
onTogglePin={session.handleTogglePin}
|
|
onToggleCollapse={session.toggleSidebarCollapse}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="sm:hidden">
|
|
<ChatSidebar
|
|
chats={session.chats}
|
|
activeChatId={session.activeChatId}
|
|
onSelectChat={session.selectChat}
|
|
onNewChat={session.handleNewChat}
|
|
onDeleteChat={session.handleDeleteChat}
|
|
onTogglePin={session.handleTogglePin}
|
|
mobileOpen={session.mobileSidebarOpen}
|
|
onMobileClose={() => session.setMobileSidebarOpen(false)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Main chat area + optional branch sidebar */}
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|
|
|
{/* Collapsed sidebar top bar — desktop only */}
|
|
{session.sidebarCollapsed && (
|
|
<div className="hidden sm:block">
|
|
<ChatSidebarCollapsedBar
|
|
chats={session.chats}
|
|
activeChatId={session.activeChatId}
|
|
onNewChat={session.handleNewChat}
|
|
onExpand={session.toggleSidebarCollapse}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Cockpit content area */}
|
|
<div className="flex-1 flex flex-col min-w-0 min-h-0">
|
|
{/* Mobile header with case history toggle */}
|
|
<div className="sm:hidden flex items-center gap-2 px-3 py-2 border-b border-border shrink-0">
|
|
<button
|
|
onClick={() => session.setMobileSidebarOpen(true)}
|
|
className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
|
|
>
|
|
<MessageSquare size={16} />
|
|
Cases
|
|
</button>
|
|
<div className="flex-1" />
|
|
<button
|
|
onClick={session.handleNewChat}
|
|
className="rounded-lg px-3 py-2 text-sm font-medium text-primary hover:bg-primary/10 transition-colors"
|
|
>
|
|
+ New Case
|
|
</button>
|
|
</div>
|
|
|
|
{/* View tab bar — persistent when a session is active */}
|
|
{session.activeChatId && (
|
|
<ViewToggle currentView="cockpit" sessionId={session.activeChatId} />
|
|
)}
|
|
|
|
{session.activeChatId ? (
|
|
<>
|
|
{/* Incident Header */}
|
|
<IncidentHeader
|
|
triageMeta={triageMeta}
|
|
psaTicketId={psaTicketId}
|
|
onFieldSave={handleTriageFieldSave}
|
|
onResolve={() => session.setShowConclude(true)}
|
|
onStatusUpdate={session.messages.length >= 2 ? () => session.setShowStatusUpdate(true) : undefined}
|
|
onClose={() => session.setShowConclude(true)}
|
|
/>
|
|
|
|
{/* Resizable work zone + conversation log split */}
|
|
<div ref={splitContainerRef} className="flex-1 flex flex-col min-h-0 relative">
|
|
{/* First-run onboarding overlay */}
|
|
{showOnboarding && session.messages.length === 0 && (
|
|
<div className="absolute inset-0 z-30 pointer-events-none">
|
|
{/* Steps zone label */}
|
|
<div className="absolute top-3 left-3 pointer-events-auto">
|
|
<div className="bg-elevated border border-accent/30 rounded-lg px-3 py-2 shadow-lg max-w-[200px]">
|
|
<p className="text-xs font-medium text-accent mb-0.5">Steps Panel</p>
|
|
<p className="text-[11px] text-muted-foreground leading-snug">Troubleshooting steps appear here as FlowPilot identifies them. Click to mark done.</p>
|
|
</div>
|
|
</div>
|
|
{/* FlowPilot Asks zone label */}
|
|
<div className="absolute top-3 right-3 pointer-events-auto">
|
|
<div className="bg-elevated border border-warning/30 rounded-lg px-3 py-2 shadow-lg max-w-[200px]">
|
|
<p className="text-xs font-medium text-warning mb-0.5">AI Questions & Evidence</p>
|
|
<p className="text-[11px] text-muted-foreground leading-snug">FlowPilot asks clarifying questions here. Evidence you confirm or rule out is tracked below.</p>
|
|
</div>
|
|
</div>
|
|
{/* Conversation log label */}
|
|
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 pointer-events-auto">
|
|
<div className="bg-elevated border border-default rounded-lg px-3 py-2 shadow-lg max-w-[280px] text-center">
|
|
<p className="text-xs font-medium text-muted-foreground mb-0.5">Conversation Log</p>
|
|
<p className="text-[11px] text-muted-foreground leading-snug">Full chat history lives here. Drag the handle above to resize.</p>
|
|
<button
|
|
onClick={dismissOnboarding}
|
|
className="mt-2 text-[11px] text-accent hover:text-accent/80 transition-colors pointer-events-auto"
|
|
>
|
|
Got it, dismiss
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* Work zone */}
|
|
<div className="flex min-h-0 overflow-hidden" style={{ height: `${workZonePct}%` }}>
|
|
{/* Left: Steps panel */}
|
|
<div className="flex-[55] min-w-0 p-3 overflow-y-auto border-r border-default">
|
|
{session.loading && session.activeActions.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-full text-center gap-2">
|
|
<Loader2 size={20} className="animate-spin text-accent" />
|
|
<p className="text-xs text-muted-foreground">FlowPilot is analyzing the issue...</p>
|
|
</div>
|
|
) : (
|
|
<StepsPanel
|
|
actions={session.activeActions}
|
|
activeIndex={activeStepIndex}
|
|
completedSteps={completedSteps}
|
|
onStepComplete={handleStepComplete}
|
|
onStepSelect={handleStepSelect}
|
|
/>
|
|
)}
|
|
</div>
|
|
{/* Right: FlowPilot Asks + What We Know */}
|
|
<div className="flex-[45] min-w-0 p-3 overflow-y-auto flex flex-col gap-3">
|
|
{session.loading && session.activeQuestions.length === 0 && triageMeta.evidence_items.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-full text-center gap-2">
|
|
<Sparkles size={18} className="text-muted" />
|
|
<p className="text-xs text-muted-foreground">Questions and evidence will appear here</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<FlowPilotAsks
|
|
questions={session.activeQuestions}
|
|
onAnswer={(answer) => {
|
|
void session.sendMessage(answer, { clearComposer: false })
|
|
}}
|
|
loading={session.loading}
|
|
/>
|
|
<WhatWeKnow
|
|
items={triageMeta.evidence_items}
|
|
onAdd={handleEvidenceAdd}
|
|
onEdit={handleEvidenceEdit}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Drag handle */}
|
|
<div
|
|
onMouseDown={handleDragStart}
|
|
className="h-4 flex items-center justify-center cursor-row-resize hover:bg-elevated transition-colors flex-shrink-0 border-y border-default/50 group"
|
|
title="Drag to resize"
|
|
>
|
|
<GripHorizontal size={16} className="text-muted group-hover:text-muted-foreground transition-colors" />
|
|
</div>
|
|
|
|
{/* Conversation log */}
|
|
<div className="flex-1 min-h-[180px] overflow-y-auto bg-sidebar">
|
|
<div className="px-4 pt-2 pb-1">
|
|
<span className="text-[10px] uppercase tracking-wider text-muted font-semibold">Conversation Log</span>
|
|
</div>
|
|
{session.messages.length === 0 && !session.loading && (
|
|
<div className="flex flex-col items-center justify-center h-full text-center px-4 py-8">
|
|
<Sparkles size={24} className="text-muted mb-2" />
|
|
<p className="text-sm text-muted-foreground">
|
|
Start a new case to begin troubleshooting
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div className="px-4 pb-2 space-y-1.5">
|
|
{session.messages.map((msg, i) => (
|
|
<div
|
|
key={i}
|
|
className={cn(
|
|
'flex gap-3 text-sm leading-relaxed rounded-md px-3 py-2 border-l-2',
|
|
msg.role === 'user'
|
|
? 'border-l-muted-foreground/30 bg-white/[0.02]'
|
|
: 'border-l-accent/40 bg-accent/[0.03]'
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
'text-xs font-medium flex-shrink-0 mt-0.5 min-w-[58px]',
|
|
msg.role === 'user' ? 'text-muted-foreground' : 'text-accent/70'
|
|
)}>
|
|
{msg.role === 'user' ? 'You' : 'FlowPilot'}
|
|
</span>
|
|
<span className={cn(
|
|
msg.role === 'user' ? 'text-muted-foreground/80' : 'text-primary/80'
|
|
)}>
|
|
{msg.content}
|
|
</span>
|
|
</div>
|
|
))}
|
|
{session.loading && (
|
|
<div className="flex gap-3 text-sm px-3 py-2 border-l-2 border-l-accent/40 bg-accent/[0.03] rounded-md">
|
|
<span className="text-xs font-medium text-accent/70 min-w-[58px]">FlowPilot</span>
|
|
<Loader2 size={14} className="animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
<div ref={session.messagesEndRef} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rich Input */}
|
|
<div className="px-3 sm:px-6 py-3 shrink-0">
|
|
<div
|
|
className="max-w-3xl mx-auto"
|
|
onDragOver={session.handleDragOver}
|
|
onDragEnter={session.handleDragEnter}
|
|
onDragLeave={session.handleDragLeave}
|
|
onDrop={session.handleDrop}
|
|
>
|
|
<div className={cn(
|
|
'relative rounded-xl border transition-all',
|
|
session.loading ? 'border-border/50 opacity-50' :
|
|
session.isDragOver ? 'border-primary/50 bg-primary/5' :
|
|
'border-border focus-within:border-[rgba(96,165,250,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
|
|
)} style={{ background: 'var(--color-bg-card)' }}>
|
|
{/* Drag overlay */}
|
|
{session.isDragOver && (
|
|
<div className="absolute inset-0 z-10 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={18} />
|
|
Drop files to attach
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Textarea */}
|
|
<textarea
|
|
ref={session.inputRef}
|
|
value={session.input}
|
|
onChange={e => session.setInput(e.target.value)}
|
|
onKeyDown={session.handleKeyDown}
|
|
onPaste={session.handlePaste}
|
|
placeholder={session.loading ? 'FlowPilot is working...' : 'Describe the issue or ask FlowPilot...'}
|
|
disabled={session.loading}
|
|
rows={1}
|
|
className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
|
|
style={{ minHeight: '40px', maxHeight: '150px' }}
|
|
/>
|
|
|
|
{/* Thumbnail strip */}
|
|
{session.pendingUploads.length > 0 && (
|
|
<div className="flex gap-2 flex-wrap px-4 pb-1">
|
|
{session.pendingUploads.map((upload) => (
|
|
<div key={upload.id} className="relative w-12 h-12 rounded-lg overflow-hidden border border-border bg-background">
|
|
{upload.preview ? (
|
|
<img src={upload.preview} alt="" className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-[0.5rem] text-muted-foreground px-1 text-center">
|
|
{upload.file.name.split('.').pop()?.toUpperCase()}
|
|
</div>
|
|
)}
|
|
{upload.status === 'uploading' && (
|
|
<div className="absolute inset-0 bg-background/60 flex items-center justify-center">
|
|
<Loader2 size={12} className="animate-spin text-primary" />
|
|
</div>
|
|
)}
|
|
{upload.status === 'done' && (
|
|
<button type="button" onClick={() => session.handleRemoveUpload(upload.id)} className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors">
|
|
<X size={8} 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={() => session.retryUpload(upload.id)}>
|
|
<RotateCcw size={10} className="text-rose-500" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Logs textarea */}
|
|
{session.showLogs && (
|
|
<div className="px-4 pb-1">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-[0.625rem] uppercase tracking-wide text-muted-foreground font-sans">Paste logs or error output</span>
|
|
<button type="button" onClick={() => { session.setShowLogs(false); session.setLogContent('') }} className="text-muted-foreground hover:text-foreground"><X size={14} /></button>
|
|
</div>
|
|
<textarea
|
|
value={session.logContent}
|
|
onChange={(e) => session.setLogContent(e.target.value)}
|
|
placeholder="Paste event viewer logs, error messages, PowerShell output..."
|
|
rows={3}
|
|
className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Bottom toolbar */}
|
|
<div className="flex items-center justify-between px-3 py-1.5 border-t border-border/50">
|
|
<div className="flex items-center gap-0.5">
|
|
<input ref={session.fileInputRef} type="file" multiple accept={session.ACCEPTED_FILE_TYPES} onChange={session.handleFileSelect} className="hidden" />
|
|
<button type="button" onClick={() => session.fileInputRef.current?.click()} disabled={session.loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40" title="Attach files">
|
|
<Paperclip size={14} />
|
|
<span className="hidden sm:inline">Attach</span>
|
|
</button>
|
|
{!session.showLogs && (
|
|
<button type="button" onClick={() => session.setShowLogs(true)} disabled={session.loading} className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40" title="Paste logs">
|
|
<Terminal size={14} />
|
|
<span className="hidden sm:inline">Paste Logs</span>
|
|
</button>
|
|
)}
|
|
{!session.showTaskLane && (session.activeQuestions.length > 0 || session.activeActions.length > 0) && (
|
|
<button
|
|
type="button"
|
|
onClick={() => session.setShowTaskLane(true)}
|
|
className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-accent-text hover:text-foreground hover:bg-accent-dim transition-colors"
|
|
title="Show task panel"
|
|
>
|
|
<ListChecks size={14} />
|
|
Tasks ({session.activeQuestions.length + session.activeActions.length})
|
|
</button>
|
|
)}
|
|
</div>
|
|
<button type="button" onClick={session.handleSend} disabled={!session.input.trim() || session.loading} className={cn(
|
|
'flex h-8 w-8 items-center justify-center rounded-lg transition-all',
|
|
session.input.trim() && !session.loading ? 'bg-primary text-white hover:brightness-110 active:scale-95' : 'bg-secondary text-muted-foreground cursor-not-allowed'
|
|
)} title="Send message">
|
|
<Send size={15} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center h-full text-center">
|
|
<div className="w-20 h-20 rounded-full bg-accent-dim flex items-center justify-center mb-4">
|
|
<Sparkles size={32} className="text-primary" />
|
|
</div>
|
|
<h2 className="text-xl font-heading font-semibold text-foreground mb-2">
|
|
FlowPilot
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground max-w-md mb-6">
|
|
Your MSP troubleshooting copilot. Start a new case to begin
|
|
diagnosing with structured steps, evidence tracking, and AI guidance.
|
|
</p>
|
|
<button
|
|
onClick={session.handleNewChat}
|
|
className="bg-primary text-white font-semibold text-sm rounded-lg px-6 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
|
|
>
|
|
New Case
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</div>{/* close cockpit content area */}
|
|
|
|
{/* Close Case Session Modal */}
|
|
<ConcludeSessionModal
|
|
isOpen={session.showConclude}
|
|
onClose={() => session.setShowConclude(false)}
|
|
onConclude={session.handleConclude}
|
|
onResumeNew={session.handleResumeNew}
|
|
chatTitle={session.chats.find(c => c.id === session.activeChatId)?.title ?? 'Chat'}
|
|
sessionId={session.activeChatId}
|
|
/>
|
|
|
|
{/* Status Update Modal */}
|
|
{session.activeChatId && (
|
|
<StatusUpdateModal
|
|
open={session.showStatusUpdate}
|
|
onClose={() => session.setShowStatusUpdate(false)}
|
|
onGenerate={(audience, length, context) =>
|
|
aiSessionsApi.generateStatusUpdate(session.activeChatId!, { audience, length, context })
|
|
}
|
|
context="status"
|
|
/>
|
|
)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|