feat: add EditorAIPanel component with Chat and Suggestions tabs
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
50
frontend/src/components/editor-ai/SuggestionsTab.tsx
Normal file
50
frontend/src/components/editor-ai/SuggestionsTab.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Check, X, Clock } from 'lucide-react'
|
||||
import type { AISuggestion } from '@/types'
|
||||
|
||||
interface SuggestionsTabProps {
|
||||
suggestions: AISuggestion[]
|
||||
}
|
||||
|
||||
const STATUS_CONFIG = {
|
||||
accepted: { icon: Check, color: 'text-emerald-400', label: 'Accepted' },
|
||||
dismissed: { icon: X, color: 'text-rose-400', label: 'Dismissed' },
|
||||
pending: { icon: Clock, color: 'text-amber-400', label: 'Pending' },
|
||||
} as const
|
||||
|
||||
export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
|
||||
if (suggestions.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-1 items-center justify-center text-sm text-muted-foreground p-6">
|
||||
No AI suggestions yet
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto px-3 py-3 space-y-2">
|
||||
{suggestions.map((s) => {
|
||||
const config = STATUS_CONFIG[s.status]
|
||||
const StatusIcon = config.icon
|
||||
return (
|
||||
<div key={s.id} className="rounded-lg border border-border bg-[rgba(255,255,255,0.02)] px-3 py-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
||||
{s.action_type.replace(/_/g, ' ')}
|
||||
</span>
|
||||
<span className={`flex items-center gap-1 text-xs ${config.color}`}>
|
||||
<StatusIcon className="h-3 w-3" />
|
||||
{config.label}
|
||||
</span>
|
||||
</div>
|
||||
{s.target_node_id && (
|
||||
<p className="mt-1 text-xs text-muted-foreground truncate">Node: {s.target_node_id}</p>
|
||||
)}
|
||||
<p className="mt-0.5 font-label text-[0.625rem] text-[#5a6170]">
|
||||
{new Date(s.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user