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>
411 lines
22 KiB
TypeScript
411 lines
22 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { Sparkles, Send, Loader2, MessageSquare, Paperclip, Terminal, X, RotateCcw, ImagePlus, ListChecks, CheckCircle2, FileText, MoreHorizontal, Pause } 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 { ChatMessage } from '@/components/assistant/ChatMessage'
|
|
import { TaskLane } from '@/components/assistant/TaskLane'
|
|
import { ConcludeSessionModal } from '@/components/assistant/ConcludeSessionModal'
|
|
import { StatusUpdateModal } from '@/components/flowpilot/StatusUpdateModal'
|
|
import { ViewToggle } from '@/components/assistant/ViewToggle'
|
|
import { useAssistantSession } from '@/hooks/useAssistantSession'
|
|
|
|
export default function FlowPilotPage() {
|
|
const session = useAssistantSession()
|
|
const [showOverflow, setShowOverflow] = useState(false)
|
|
|
|
// Handle prefill from dashboard / command palette
|
|
useEffect(() => {
|
|
session.handlePrefill('/assistant')
|
|
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const handleTaskSubmit = async (responses: Array<{ type: string; state: string; value: string; text?: string; label?: string }>) => {
|
|
if (!session.activeChatId || session.loading || session.loadingRef.current) return
|
|
|
|
const parts: string[] = []
|
|
for (const r of responses) {
|
|
const name = r.type === 'question' ? `Q: ${r.text}` : r.label || 'Check'
|
|
if (r.state === 'done' && r.value.trim()) {
|
|
parts.push(`**${name}:**\n\`\`\`\n${r.value.trim()}\n\`\`\``)
|
|
} else if (r.state === 'skipped') {
|
|
parts.push(`**${name}:** _(skipped)_`)
|
|
}
|
|
}
|
|
const userMessage = parts.join('\n\n')
|
|
const sendChatId = session.activeChatId
|
|
|
|
session.setInput('')
|
|
session.setShowTaskLane(false)
|
|
session.setActiveQuestions([])
|
|
session.setActiveActions([])
|
|
|
|
try {
|
|
const response = await aiSessionsApi.sendChatMessage(sendChatId, { message: userMessage })
|
|
if (session.currentChatRef.current !== sendChatId) return
|
|
session.processResponse(response, sendChatId)
|
|
|
|
const hasQuestions = response.questions && response.questions.length > 0
|
|
const hasActions = response.actions && response.actions.length > 0
|
|
if (!hasQuestions && !hasActions) {
|
|
session.setShowTaskLane(false)
|
|
session.setActiveQuestions([])
|
|
session.setActiveActions([])
|
|
}
|
|
} catch {
|
|
// Error handled by processResponse guard
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageMeta title="FlowPilot" />
|
|
<div className="flex h-[calc(100vh-3.5rem)]">
|
|
{/* Chat Sidebar — 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>
|
|
)}
|
|
{/* Chat Sidebar — mobile */}
|
|
<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 area */}
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|
{/* Collapsed sidebar bar */}
|
|
{session.sidebarCollapsed && (
|
|
<div className="hidden sm:block">
|
|
<ChatSidebarCollapsedBar
|
|
chats={session.chats}
|
|
activeChatId={session.activeChatId}
|
|
onNewChat={session.handleNewChat}
|
|
onExpand={session.toggleSidebarCollapse}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Chat content row */}
|
|
<div className="flex-1 flex min-w-0 min-h-0">
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|
{/* Mobile header */}
|
|
<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
|
|
</button>
|
|
</div>
|
|
|
|
{/* View tab bar — persistent when a session is active */}
|
|
{session.activeChatId && (
|
|
<ViewToggle currentView="flowpilot" sessionId={session.activeChatId} />
|
|
)}
|
|
|
|
{session.activeChatId ? (
|
|
<>
|
|
{/* Action bar — Resolve, Update, overflow (Pause/Close) */}
|
|
{session.messages.length >= 2 && (
|
|
<div className="hidden sm:flex items-center gap-1.5 px-4 py-1.5 border-b border-border/50">
|
|
<button
|
|
type="button"
|
|
onClick={() => session.setShowConclude(true)}
|
|
disabled={session.loading}
|
|
className="flex items-center gap-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 px-3 py-1.5 text-xs font-medium text-emerald-400 hover:bg-emerald-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
|
|
>
|
|
<CheckCircle2 size={13} />
|
|
Resolve
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => session.setShowStatusUpdate(true)}
|
|
disabled={session.loading}
|
|
className="flex items-center gap-1.5 bg-blue-500/10 border border-blue-500/20 rounded-lg px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-500/20 disabled:opacity-40 disabled:pointer-events-none transition-colors"
|
|
>
|
|
<FileText size={13} />
|
|
Update
|
|
</button>
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowOverflow(!showOverflow)}
|
|
className="flex items-center justify-center rounded-lg px-2 py-1.5 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
|
|
>
|
|
<MoreHorizontal size={16} />
|
|
</button>
|
|
{showOverflow && (
|
|
<>
|
|
<div className="fixed inset-0 z-40" onClick={() => setShowOverflow(false)} />
|
|
<div className="absolute right-0 top-full mt-1 z-50 w-40 rounded-lg border border-border bg-card py-1 shadow-lg">
|
|
<button
|
|
onClick={() => { setShowOverflow(false); /* pause not wired on chat sessions yet */ }}
|
|
className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
|
|
>
|
|
<Pause size={13} />
|
|
Pause
|
|
</button>
|
|
<button
|
|
onClick={() => { setShowOverflow(false); session.setShowConclude(true) }}
|
|
className="flex w-full items-center gap-2 px-3 py-2 text-xs text-muted-foreground hover:text-rose-400 hover:bg-rose-500/10 transition-colors"
|
|
>
|
|
<X size={13} />
|
|
Close
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Messages */}
|
|
<div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 space-y-4">
|
|
{session.messages.length === 0 && !session.loading && (
|
|
<div className="flex flex-col items-center justify-center h-full text-center">
|
|
<div className="w-16 h-16 rounded-full bg-accent-dim flex items-center justify-center mb-4">
|
|
<Sparkles size={28} className="text-primary" />
|
|
</div>
|
|
<h2 className="text-lg font-heading font-semibold text-foreground mb-2">
|
|
FlowPilot
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground max-w-md">
|
|
Ask me anything about IT infrastructure, networking, Active Directory,
|
|
cloud platforms, or troubleshooting. I'll also suggest relevant flows from your team's library.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{session.messages.length === 0 && session.loading && (
|
|
<div className="flex flex-col items-center justify-center h-full text-center gap-3">
|
|
<Loader2 size={24} className="animate-spin text-primary" />
|
|
<p className="text-sm text-muted-foreground">Starting session...</p>
|
|
</div>
|
|
)}
|
|
{session.messages.map((msg, i) => (
|
|
<ChatMessage
|
|
key={i}
|
|
role={msg.role}
|
|
content={msg.content}
|
|
suggestedFlows={msg.suggestedFlows}
|
|
/>
|
|
))}
|
|
{session.loading && (
|
|
<div className="flex gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
|
|
<Sparkles size={14} className="text-primary" />
|
|
</div>
|
|
<div className="bg-input border border-border rounded-2xl px-4 py-3">
|
|
<Loader2 size={16} className="animate-spin text-primary" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div ref={session.messagesEndRef} />
|
|
</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)' }}>
|
|
{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
|
|
ref={session.inputRef}
|
|
value={session.input}
|
|
onChange={e => session.setInput(e.target.value)}
|
|
onKeyDown={session.handleKeyDown}
|
|
onPaste={session.handlePaste}
|
|
placeholder={session.loading ? 'AI is thinking...' : 'Type a message, paste a screenshot, or drag a file...'}
|
|
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' }}
|
|
/>
|
|
|
|
{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>
|
|
)}
|
|
|
|
{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>
|
|
)}
|
|
|
|
<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 Senior Systems & Network Engineer. Ask anything about IT infrastructure,
|
|
or start a new chat to get personalized help with your team's flows.
|
|
</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"
|
|
>
|
|
Start a Conversation
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Task lane */}
|
|
{session.showTaskLane && (session.activeQuestions.length > 0 || session.activeActions.length > 0) && (
|
|
<TaskLane
|
|
questions={session.activeQuestions}
|
|
actions={session.activeActions}
|
|
sessionId={session.activeChatId}
|
|
onSubmit={handleTaskSubmit}
|
|
onClose={() => session.setShowTaskLane(false)}
|
|
loading={session.loading}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Close Case 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>
|
|
</>
|
|
)
|
|
}
|