VIBN Frontend for Coolify deployment

app/[workspace]/project/[projectId]/context/page.tsx

@@ -0,0 +1,590 @@
+"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>
+  );
+}
+