VIBN Frontend for Coolify deployment
This commit is contained in:
223
app/[workspace]/project/[projectId]/associate-sessions/page.tsx
Normal file
223
app/[workspace]/project/[projectId]/associate-sessions/page.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { auth, db } from '@/lib/firebase/config';
|
||||
import { doc, getDoc } from 'firebase/firestore';
|
||||
import { toast } from 'sonner';
|
||||
import { Loader2, Link as LinkIcon, CheckCircle2 } from 'lucide-react';
|
||||
import { useParams } from 'next/navigation';
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
productName: string;
|
||||
githubRepo?: string;
|
||||
workspacePath?: string;
|
||||
}
|
||||
|
||||
export default function AssociateSessionsPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [associating, setAssociating] = useState(false);
|
||||
const [result, setResult] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadProject();
|
||||
}, [projectId]);
|
||||
|
||||
const loadProject = async () => {
|
||||
try {
|
||||
const projectDoc = await getDoc(doc(db, 'projects', projectId));
|
||||
if (projectDoc.exists()) {
|
||||
setProject({ id: projectDoc.id, ...projectDoc.data() } as Project);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading project:', error);
|
||||
toast.error('Failed to load project');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAssociateSessions = async () => {
|
||||
if (!project?.githubRepo) {
|
||||
toast.error('Project does not have a GitHub repository connected');
|
||||
return;
|
||||
}
|
||||
|
||||
setAssociating(true);
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const user = auth.currentUser;
|
||||
if (!user) {
|
||||
toast.error('Please sign in');
|
||||
return;
|
||||
}
|
||||
|
||||
const token = await user.getIdToken();
|
||||
const response = await fetch(`/api/projects/${projectId}/associate-github-sessions`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
githubRepo: project.githubRepo,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setResult(data);
|
||||
|
||||
if (data.sessionsAssociated > 0) {
|
||||
toast.success(`Success!`, {
|
||||
description: `Linked ${data.sessionsAssociated} existing chat sessions to this project`,
|
||||
});
|
||||
} else {
|
||||
toast.info('No unassociated sessions found for this repository');
|
||||
}
|
||||
} else {
|
||||
const error = await response.json();
|
||||
toast.error(error.error || 'Failed to associate sessions');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
toast.error('An error occurred');
|
||||
} finally {
|
||||
setAssociating(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-4xl mx-auto p-8 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Associate Existing Sessions</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Find and link chat sessions from this GitHub repository
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Project Details</CardTitle>
|
||||
<CardDescription>Current project configuration</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Product Name</p>
|
||||
<p className="font-medium">{project?.productName}</p>
|
||||
</div>
|
||||
|
||||
{project?.githubRepo && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">GitHub Repository</p>
|
||||
<p className="font-medium font-mono text-sm">{project.githubRepo}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{project?.workspacePath && (
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Workspace Path</p>
|
||||
<p className="font-medium font-mono text-sm">{project.workspacePath}</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Find Matching Sessions</CardTitle>
|
||||
<CardDescription>
|
||||
Search your database for chat sessions that match this project's GitHub repository
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="bg-muted/50 p-4 rounded-lg space-y-2 text-sm">
|
||||
<p><strong>How it works:</strong></p>
|
||||
<ul className="list-disc list-inside space-y-1 text-muted-foreground">
|
||||
<li>Searches for sessions with matching GitHub repository</li>
|
||||
<li>Also checks sessions from matching workspace paths</li>
|
||||
<li>Only links sessions that aren't already assigned to a project</li>
|
||||
<li>Updates all matched sessions to link to this project</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleAssociateSessions}
|
||||
disabled={!project?.githubRepo || associating}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
{associating ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Searching...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LinkIcon className="mr-2 h-4 w-4" />
|
||||
Find and Link Sessions
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{!project?.githubRepo && (
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
Connect a GitHub repository first to use this feature
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{result && (
|
||||
<Card className="border-green-500/50 bg-green-50/50 dark:bg-green-950/20">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-green-600">
|
||||
<CheckCircle2 className="h-5 w-5" />
|
||||
Results
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Sessions Linked</p>
|
||||
<p className="text-2xl font-bold">{result.sessionsAssociated}</p>
|
||||
</div>
|
||||
|
||||
{result.details && (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Exact GitHub Matches</p>
|
||||
<p className="text-2xl font-bold">{result.details.exactMatches}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Path Matches</p>
|
||||
<p className="text-2xl font-bold">{result.details.pathMatches}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{result.message}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user