VIBN Frontend for Coolify deployment
This commit is contained in:
225
components/ai/collector-checklist.tsx
Normal file
225
components/ai/collector-checklist.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CheckCircle2, Circle, Loader2 } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { db } from "@/lib/firebase/config";
|
||||
import { doc, onSnapshot, collection, query, where } from "firebase/firestore";
|
||||
|
||||
interface CollectorChecklistProps {
|
||||
projectId: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CollectorChecklist({ projectId, className }: CollectorChecklistProps) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPhase, setCurrentPhase] = useState<string | null>(null);
|
||||
const [hasDocuments, setHasDocuments] = useState(false);
|
||||
const [documentCount, setDocumentCount] = useState(0);
|
||||
const [githubConnected, setGithubConnected] = useState(false);
|
||||
const [githubRepo, setGithubRepo] = useState<string | null>(null);
|
||||
const [extensionLinked, setExtensionLinked] = useState(false);
|
||||
const [readyForNextPhase, setReadyForNextPhase] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!projectId) return;
|
||||
|
||||
const unsubscribe = onSnapshot(
|
||||
doc(db, "projects", projectId),
|
||||
(snapshot) => {
|
||||
if (snapshot.exists()) {
|
||||
const data = snapshot.data();
|
||||
const phase = data?.currentPhase || 'collector';
|
||||
setCurrentPhase(phase);
|
||||
|
||||
// Get actual state from project data
|
||||
const repo = data?.githubRepo || null;
|
||||
|
||||
setGithubConnected(!!repo);
|
||||
setGithubRepo(repo);
|
||||
|
||||
// Check handoff for readiness
|
||||
const handoff = data?.phaseData?.phaseHandoffs?.collector;
|
||||
setReadyForNextPhase(handoff?.readyForNextPhase || false);
|
||||
|
||||
console.log("[CollectorChecklist] Project state:", {
|
||||
currentPhase: phase,
|
||||
githubRepo: repo,
|
||||
readyForNextPhase: handoff?.readyForNextPhase,
|
||||
userId: data?.userId, // Log the user ID
|
||||
});
|
||||
|
||||
// Also log it prominently for easy copying
|
||||
console.log(`🆔 YOUR USER ID: ${data?.userId}`);
|
||||
} else {
|
||||
console.log("[CollectorChecklist] Project not found:", projectId);
|
||||
}
|
||||
setLoading(false);
|
||||
},
|
||||
(error) => {
|
||||
console.error("[CollectorChecklist] Error loading checklist:", error);
|
||||
setLoading(false);
|
||||
}
|
||||
);
|
||||
|
||||
return () => unsubscribe();
|
||||
}, [projectId]);
|
||||
|
||||
// Separate effect to check for linked sessions (extension linked)
|
||||
useEffect(() => {
|
||||
if (!projectId) return;
|
||||
|
||||
console.log(`[CollectorChecklist] Querying sessions for projectId: "${projectId}"`);
|
||||
|
||||
const sessionsRef = collection(db, 'sessions');
|
||||
const q = query(sessionsRef, where('projectId', '==', projectId));
|
||||
|
||||
const unsubscribe = onSnapshot(q, (snapshot) => {
|
||||
const hasLinkedSessions = !snapshot.empty;
|
||||
setExtensionLinked(hasLinkedSessions);
|
||||
console.log("[CollectorChecklist] Extension linked (sessions found):", hasLinkedSessions, `(${snapshot.size} sessions)`);
|
||||
|
||||
// Debug: Show session IDs if found
|
||||
if (snapshot.size > 0) {
|
||||
const sessionIds = snapshot.docs.map(doc => doc.id);
|
||||
console.log("[CollectorChecklist] Found session IDs:", sessionIds);
|
||||
}
|
||||
}, (error) => {
|
||||
console.error("[CollectorChecklist] Error querying sessions:", error);
|
||||
});
|
||||
|
||||
return () => unsubscribe();
|
||||
}, [projectId]);
|
||||
|
||||
// Separate effect to count documents from knowledge_items collection
|
||||
// Count both uploaded documents AND pasted AI chat content
|
||||
useEffect(() => {
|
||||
if (!projectId) return;
|
||||
|
||||
const q = query(
|
||||
collection(db, 'knowledge_items'),
|
||||
where('projectId', '==', projectId)
|
||||
);
|
||||
|
||||
const unsubscribe = onSnapshot(q, (snapshot) => {
|
||||
// Filter for document types (uploaded files and pasted content)
|
||||
const docs = snapshot.docs.filter(doc => {
|
||||
const sourceType = doc.data().sourceType;
|
||||
return sourceType === 'imported_document' || sourceType === 'imported_ai_chat';
|
||||
});
|
||||
|
||||
const count = docs.length;
|
||||
setHasDocuments(count > 0);
|
||||
setDocumentCount(count);
|
||||
console.log("[CollectorChecklist] Document count:", count, "(documents + pasted content)");
|
||||
});
|
||||
|
||||
return () => unsubscribe();
|
||||
}, [projectId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="mb-3">
|
||||
<h3 className="text-sm font-semibold">Setup Progress</h3>
|
||||
</div>
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const checklist = [
|
||||
{
|
||||
id: "documents",
|
||||
label: "Documents uploaded",
|
||||
checked: hasDocuments,
|
||||
count: documentCount,
|
||||
},
|
||||
{
|
||||
id: "github",
|
||||
label: "GitHub connected",
|
||||
checked: githubConnected,
|
||||
repo: githubRepo,
|
||||
},
|
||||
{
|
||||
id: "extension",
|
||||
label: "Extension linked",
|
||||
checked: extensionLinked,
|
||||
},
|
||||
];
|
||||
|
||||
const completedCount = checklist.filter((item) => item.checked).length;
|
||||
const progress = (completedCount / checklist.length) * 100;
|
||||
|
||||
// If phase is beyond collector, show completed state
|
||||
const isCompleted = currentPhase === 'analyzed' || currentPhase === 'vision' || currentPhase === 'mvp';
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{/* Header */}
|
||||
<div className="mb-3">
|
||||
<h3 className="text-sm font-semibold">
|
||||
{isCompleted ? '✓ Setup Complete' : 'Setup Progress'}
|
||||
</h3>
|
||||
<div className="mt-2">
|
||||
<div className="w-full bg-secondary h-2 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-300"
|
||||
style={{ width: `${isCompleted ? 100 : progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{isCompleted ? '3 of 3 complete' : `${completedCount} of ${checklist.length} complete`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Checklist Items */}
|
||||
<div className="space-y-2">
|
||||
{checklist.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`flex items-center gap-2 py-2 px-3 rounded-md border ${
|
||||
(item.checked || isCompleted)
|
||||
? "bg-green-50 border-green-200"
|
||||
: "bg-muted/50 border-muted text-muted-foreground opacity-60"
|
||||
}`}
|
||||
>
|
||||
{(item.checked || isCompleted) ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600 flex-shrink-0" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4 text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium">
|
||||
{item.label}
|
||||
{item.checked && item.count !== undefined && (
|
||||
<span className="text-muted-foreground ml-1">
|
||||
({item.count})
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{item.checked && item.repo && (
|
||||
<p className="text-[10px] text-muted-foreground truncate">
|
||||
{item.repo}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Ready indicator */}
|
||||
{readyForNextPhase && (
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<p className="text-xs text-green-600 font-medium">
|
||||
✓ Ready for extraction phase
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user