591 lines
22 KiB
TypeScript
591 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { FolderOpen, Plus, Github, Zap, FileText, Trash2, CheckCircle2, Upload } from "lucide-react";
|
|
import { CursorIcon } from "@/components/icons/custom-icons";
|
|
import { db } from "@/lib/firebase/config";
|
|
import { collection, doc, getDoc, addDoc, deleteDoc, query, where, getDocs, updateDoc } from "firebase/firestore";
|
|
import { toast } from "sonner";
|
|
import { auth } from "@/lib/firebase/config";
|
|
import { GitHubRepoPicker } from "@/components/ai/github-repo-picker";
|
|
|
|
interface ContextSource {
|
|
id: string;
|
|
type: "github" | "extension" | "chat" | "file" | "document";
|
|
name: string;
|
|
content?: string;
|
|
url?: string;
|
|
summary?: string;
|
|
connectedAt: Date;
|
|
metadata?: any;
|
|
chunkCount?: number;
|
|
}
|
|
|
|
interface Project {
|
|
githubRepo?: string;
|
|
githubRepoUrl?: string;
|
|
}
|
|
|
|
export default function ContextPage() {
|
|
const params = useParams();
|
|
const projectId = params.projectId as string;
|
|
const [sources, setSources] = useState<ContextSource[]>([]);
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
|
const [chatTitle, setChatTitle] = useState("");
|
|
const [chatContent, setChatContent] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
const [uploadMode, setUploadMode] = useState<"text" | "file">("text");
|
|
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [isGithubDialogOpen, setIsGithubDialogOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
if (!projectId) return;
|
|
|
|
try {
|
|
// Fetch project details
|
|
const projectRef = doc(db, "projects", projectId);
|
|
const projectSnap = await getDoc(projectRef);
|
|
|
|
if (projectSnap.exists()) {
|
|
setProject(projectSnap.data() as Project);
|
|
}
|
|
|
|
// Fetch context sources
|
|
const contextRef = collection(db, "projects", projectId, "contextSources");
|
|
const contextSnap = await getDocs(contextRef);
|
|
|
|
const fetchedSources: ContextSource[] = contextSnap.docs.map(doc => ({
|
|
id: doc.id,
|
|
...doc.data(),
|
|
connectedAt: doc.data().connectedAt?.toDate() || new Date()
|
|
} as ContextSource));
|
|
|
|
setSources(fetchedSources);
|
|
} catch (error) {
|
|
console.error("Error fetching context data:", error);
|
|
toast.error("Failed to load context sources");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [projectId]);
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.files && e.target.files.length > 0) {
|
|
setSelectedFiles(Array.from(e.target.files));
|
|
}
|
|
};
|
|
|
|
const handleAddChatContent = async () => {
|
|
if (!chatTitle.trim() || !chatContent.trim()) {
|
|
toast.error("Please provide both a title and content");
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
try {
|
|
// Generate AI summary
|
|
toast.info("Generating summary...");
|
|
const summaryResponse = await fetch("/api/context/summarize", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content: chatContent, title: chatTitle })
|
|
});
|
|
|
|
let summary = "";
|
|
if (summaryResponse.ok) {
|
|
const data = await summaryResponse.json();
|
|
summary = data.summary;
|
|
} else {
|
|
console.error("Failed to generate summary");
|
|
summary = `${chatContent.substring(0, 100)}...`;
|
|
}
|
|
|
|
// Also create a knowledge_item so it's included in extraction and checklist
|
|
const user = auth.currentUser;
|
|
if (!user) {
|
|
toast.error("Please sign in");
|
|
return;
|
|
}
|
|
|
|
const token = await user.getIdToken();
|
|
const importResponse = await fetch(`/api/projects/${projectId}/knowledge/import-ai-chat`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"Authorization": `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({
|
|
title: chatTitle,
|
|
transcript: chatContent, // API expects 'transcript' not 'content'
|
|
provider: 'other',
|
|
}),
|
|
});
|
|
|
|
if (!importResponse.ok) {
|
|
throw new Error("Failed to save content as knowledge item");
|
|
}
|
|
|
|
const contextRef = collection(db, "projects", projectId, "contextSources");
|
|
const newSource = {
|
|
type: "chat",
|
|
name: chatTitle,
|
|
content: chatContent,
|
|
summary: summary,
|
|
connectedAt: new Date(),
|
|
metadata: {
|
|
length: chatContent.length,
|
|
addedManually: true
|
|
}
|
|
};
|
|
|
|
const docRef = await addDoc(contextRef, newSource);
|
|
|
|
setSources([...sources, {
|
|
id: docRef.id,
|
|
...newSource,
|
|
connectedAt: new Date()
|
|
} as ContextSource]);
|
|
|
|
toast.success("Chat content added successfully");
|
|
setIsAddModalOpen(false);
|
|
setChatTitle("");
|
|
setChatContent("");
|
|
} catch (error) {
|
|
console.error("Error adding chat content:", error);
|
|
toast.error("Failed to add chat content");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleUploadDocuments = async () => {
|
|
if (selectedFiles.length === 0) {
|
|
toast.error("Please select at least one file");
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
try {
|
|
const user = auth.currentUser;
|
|
if (!user) {
|
|
toast.error("Please sign in to upload documents");
|
|
return;
|
|
}
|
|
|
|
const token = await user.getIdToken();
|
|
|
|
for (const file of selectedFiles) {
|
|
toast.info(`Uploading ${file.name}...`);
|
|
|
|
// Create FormData to send file as multipart/form-data
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('projectId', projectId);
|
|
|
|
// Upload to endpoint that handles file storage + chunking
|
|
const response = await fetch(`/api/projects/${projectId}/knowledge/upload-document`, {
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: formData,
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to upload ${file.name}`);
|
|
}
|
|
|
|
const result = await response.json();
|
|
toast.success(`${file.name} uploaded: ${result.chunkCount} chunks created`);
|
|
}
|
|
|
|
// Reload sources
|
|
const contextRef = collection(db, "projects", projectId, "contextSources");
|
|
const contextSnap = await getDocs(contextRef);
|
|
|
|
const fetchedSources: ContextSource[] = contextSnap.docs.map(doc => ({
|
|
id: doc.id,
|
|
...doc.data(),
|
|
connectedAt: doc.data().connectedAt?.toDate() || new Date()
|
|
} as ContextSource));
|
|
|
|
setSources(fetchedSources);
|
|
|
|
setIsAddModalOpen(false);
|
|
setSelectedFiles([]);
|
|
toast.success("All documents uploaded successfully");
|
|
} catch (error) {
|
|
console.error("Error uploading documents:", error);
|
|
toast.error(error instanceof Error ? error.message : "Failed to upload documents");
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteSource = async (sourceId: string) => {
|
|
try {
|
|
const sourceRef = doc(db, "projects", projectId, "contextSources", sourceId);
|
|
await deleteDoc(sourceRef);
|
|
|
|
setSources(sources.filter(s => s.id !== sourceId));
|
|
toast.success("Context source removed");
|
|
} catch (error) {
|
|
console.error("Error deleting source:", error);
|
|
toast.error("Failed to remove source");
|
|
}
|
|
};
|
|
|
|
const getSourceIcon = (type: string) => {
|
|
switch (type) {
|
|
case "github":
|
|
return <Github className="h-5 w-5" />;
|
|
case "extension":
|
|
return <CursorIcon className="h-5 w-5" />;
|
|
case "chat":
|
|
return <FileText className="h-5 w-5" />;
|
|
case "file":
|
|
return <FileText className="h-5 w-5" />;
|
|
case "document":
|
|
return <FileText className="h-5 w-5" />;
|
|
default:
|
|
return <FolderOpen className="h-5 w-5" />;
|
|
}
|
|
};
|
|
|
|
const getSourceLabel = (source: ContextSource) => {
|
|
switch (source.type) {
|
|
case "github":
|
|
return `Connected GitHub: ${source.name}`;
|
|
case "extension":
|
|
return "Installed Vibn Extension";
|
|
case "chat":
|
|
return source.name;
|
|
case "file":
|
|
return source.name;
|
|
default:
|
|
return source.name;
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-sm text-muted-foreground">Loading context sources...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Build sources list with auto-detected connections
|
|
// Note: GitHub is now shown in its own section via GitHubRepoPicker component
|
|
const allSources: ContextSource[] = [...sources];
|
|
|
|
// Check if extension is installed (placeholder for now)
|
|
const extensionInstalled = true; // TODO: Detect extension
|
|
if (extensionInstalled && !sources.find(s => s.type === "extension")) {
|
|
allSources.unshift({
|
|
id: "extension-auto",
|
|
type: "extension",
|
|
name: "Cursor Extension",
|
|
connectedAt: new Date()
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full flex-col overflow-hidden">
|
|
{/* Header */}
|
|
<div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="flex h-14 items-center gap-2 px-6">
|
|
<FolderOpen className="h-5 w-5 text-muted-foreground" />
|
|
<h1 className="text-lg font-semibold">Context Sources</h1>
|
|
<div className="ml-auto">
|
|
<Dialog open={isAddModalOpen} onOpenChange={setIsAddModalOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button size="sm">
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Context
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Add Context</DialogTitle>
|
|
<DialogDescription>
|
|
Upload documents or paste text to give the AI more context about your project.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-4 py-4">
|
|
{/* Mode Selector */}
|
|
<div className="flex gap-2 p-1 bg-muted rounded-lg">
|
|
<Button
|
|
variant={uploadMode === "file" ? "secondary" : "ghost"}
|
|
size="sm"
|
|
className="flex-1"
|
|
onClick={() => setUploadMode("file")}
|
|
>
|
|
<Upload className="h-4 w-4 mr-2" />
|
|
Upload Files
|
|
</Button>
|
|
<Button
|
|
variant={uploadMode === "text" ? "secondary" : "ghost"}
|
|
size="sm"
|
|
className="flex-1"
|
|
onClick={() => setUploadMode("text")}
|
|
>
|
|
<FileText className="h-4 w-4 mr-2" />
|
|
Paste Text
|
|
</Button>
|
|
</div>
|
|
|
|
{uploadMode === "file" ? (
|
|
/* File Upload Mode */
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="file-upload">Select Documents</Label>
|
|
<Input
|
|
id="file-upload"
|
|
type="file"
|
|
multiple
|
|
accept=".txt,.md,.pdf,.doc,.docx,.json,.csv,.xml"
|
|
onChange={handleFileChange}
|
|
/>
|
|
{selectedFiles.length > 0 && (
|
|
<div className="text-sm text-muted-foreground mt-2">
|
|
Selected: {selectedFiles.map(f => f.name).join(", ")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Documents will be stored for the Extractor AI to review and process.
|
|
Supported formats: TXT, MD, PDF, DOC, JSON, CSV, XML
|
|
</p>
|
|
</div>
|
|
) : (
|
|
/* Text Paste Mode */
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title">Title</Label>
|
|
<Input
|
|
id="title"
|
|
placeholder="e.g., Planning discussion with Sarah"
|
|
value={chatTitle}
|
|
onChange={(e) => setChatTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="content">Content</Label>
|
|
<Textarea
|
|
id="content"
|
|
placeholder="Paste your chat conversation or notes here..."
|
|
value={chatContent}
|
|
onChange={(e) => setChatContent(e.target.value)}
|
|
className="min-h-[300px] font-mono text-sm"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setIsAddModalOpen(false)}>
|
|
Cancel
|
|
</Button>
|
|
{uploadMode === "file" ? (
|
|
<Button onClick={handleUploadDocuments} disabled={isProcessing || selectedFiles.length === 0}>
|
|
{isProcessing ? "Processing..." : `Upload ${selectedFiles.length} File${selectedFiles.length !== 1 ? 's' : ''}`}
|
|
</Button>
|
|
) : (
|
|
<Button onClick={handleAddChatContent} disabled={saving}>
|
|
{saving ? "Saving..." : "Add Context"}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-auto p-6">
|
|
<div className="mx-auto max-w-4xl space-y-4">
|
|
{/* GitHub Repository Connection */}
|
|
<div className="mb-6">
|
|
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
|
|
GitHub Repository
|
|
</h2>
|
|
{project?.githubRepo ? (
|
|
// Show connected repo
|
|
<Card className="p-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted shrink-0">
|
|
<Github className="h-5 w-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="font-semibold text-sm">Connected: {project.githubRepo}</h3>
|
|
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mb-2">
|
|
Repository connected and ready for AI access
|
|
</p>
|
|
{project.githubRepoUrl && (
|
|
<a
|
|
href={project.githubRepoUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-blue-600 hover:underline inline-block"
|
|
>
|
|
View on GitHub →
|
|
</a>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setIsGithubDialogOpen(true)}
|
|
>
|
|
Change
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
// Show connect button
|
|
<Card className="p-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted shrink-0">
|
|
<Github className="h-5 w-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-sm mb-1">Connect GitHub Repository</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
Give the AI access to your codebase for better context
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => setIsGithubDialogOpen(true)}
|
|
size="sm"
|
|
>
|
|
<Github className="h-4 w-4 mr-2" />
|
|
Connect
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* GitHub Connection Dialog */}
|
|
<Dialog open={isGithubDialogOpen} onOpenChange={setIsGithubDialogOpen}>
|
|
<DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle>Connect GitHub Repository</DialogTitle>
|
|
<DialogDescription>
|
|
Connect a GitHub repository to give the AI access to your codebase
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="overflow-y-auto">
|
|
<GitHubRepoPicker
|
|
projectId={projectId}
|
|
onRepoSelected={(repo) => {
|
|
toast.success(`Repository ${repo.full_name} connected!`);
|
|
setIsGithubDialogOpen(false);
|
|
// Reload project data to show the connected repo
|
|
const fetchProject = async () => {
|
|
const projectRef = doc(db, "projects", projectId);
|
|
const projectSnap = await getDoc(projectRef);
|
|
if (projectSnap.exists()) {
|
|
setProject(projectSnap.data() as Project);
|
|
}
|
|
};
|
|
fetchProject();
|
|
}}
|
|
/>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
{/* Other Context Sources */}
|
|
<div>
|
|
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
|
|
Additional Context
|
|
</h2>
|
|
</div>
|
|
|
|
{allSources.length === 0 ? (
|
|
<Card className="p-8 text-center">
|
|
<FolderOpen className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
|
<h3 className="text-lg font-semibold mb-2">No Context Sources Yet</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Add context sources to help the AI understand your project better
|
|
</p>
|
|
<Button onClick={() => setIsAddModalOpen(true)}>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Your First Context
|
|
</Button>
|
|
</Card>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{allSources.map((source) => (
|
|
<Card key={source.id} className="p-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
|
|
{getSourceIcon(source.type)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="font-semibold text-sm">{getSourceLabel(source)}</h3>
|
|
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Connected {source.connectedAt.toLocaleDateString()}
|
|
</p>
|
|
{source.summary && (
|
|
<p className="text-sm text-foreground/80 mt-2 leading-relaxed">
|
|
{source.summary}
|
|
</p>
|
|
)}
|
|
{source.url && (
|
|
<a
|
|
href={source.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-blue-600 hover:underline mt-1 inline-block"
|
|
>
|
|
{source.type === 'github' ? 'View on GitHub →' :
|
|
source.type === 'document' ? 'Download File →' :
|
|
'View Source →'}
|
|
</a>
|
|
)}
|
|
</div>
|
|
{!source.id.includes("auto") && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleDeleteSource(source.id)}
|
|
>
|
|
<Trash2 className="h-4 w-4 text-muted-foreground" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|