Mark Henderson
bada63452f
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases) - Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code) - Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif - Project shell and global chrome use semantic colors - Replace Outfit/Newsreader references across TSX inline styles Made-with: Cursor
331 lines
13 KiB
TypeScript
331 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { useRouter, useParams } from "next/navigation";
|
||
|
||
interface AnalysisResult {
|
||
decisions: string[];
|
||
ideas: string[];
|
||
openQuestions: string[];
|
||
architecture: string[];
|
||
targetUsers: string[];
|
||
}
|
||
|
||
interface ChatImportMainProps {
|
||
projectId: string;
|
||
projectName: string;
|
||
sourceData?: { chatText?: string };
|
||
analysisResult?: AnalysisResult;
|
||
}
|
||
|
||
type Stage = "intake" | "extracting" | "review";
|
||
|
||
function EditableList({
|
||
label,
|
||
items,
|
||
accent,
|
||
onChange,
|
||
}: {
|
||
label: string;
|
||
items: string[];
|
||
accent: string;
|
||
onChange: (items: string[]) => void;
|
||
}) {
|
||
const handleEdit = (i: number, value: string) => {
|
||
const next = [...items];
|
||
next[i] = value;
|
||
onChange(next);
|
||
};
|
||
const handleDelete = (i: number) => {
|
||
onChange(items.filter((_, idx) => idx !== i));
|
||
};
|
||
const handleAdd = () => {
|
||
onChange([...items, ""]);
|
||
};
|
||
|
||
return (
|
||
<div style={{ marginBottom: 16 }}>
|
||
<div style={{ fontSize: "0.68rem", fontWeight: 700, color: accent, letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 8 }}>
|
||
{label}
|
||
</div>
|
||
{items.length === 0 && (
|
||
<p style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", margin: "0 0 6px" }}>
|
||
Nothing captured.
|
||
</p>
|
||
)}
|
||
{items.map((item, i) => (
|
||
<div key={i} style={{ display: "flex", gap: 6, marginBottom: 5 }}>
|
||
<input
|
||
type="text"
|
||
value={item}
|
||
onChange={e => handleEdit(i, e.target.value)}
|
||
style={{
|
||
flex: 1, padding: "7px 10px", borderRadius: 6,
|
||
border: "1px solid #e0dcd4", background: "#faf8f5",
|
||
fontSize: "0.81rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||
color: "#1a1a1a", outline: "none",
|
||
}}
|
||
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
|
||
onBlur={e => (e.currentTarget.style.borderColor = "#e0dcd4")}
|
||
/>
|
||
<button
|
||
onClick={() => handleDelete(i)}
|
||
style={{ background: "none", border: "none", cursor: "pointer", color: "#c5c0b8", fontSize: "0.85rem", padding: "4px 6px" }}
|
||
onMouseEnter={e => (e.currentTarget.style.color = "#e53e3e")}
|
||
onMouseLeave={e => (e.currentTarget.style.color = "#c5c0b8")}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
))}
|
||
<button
|
||
onClick={handleAdd}
|
||
style={{
|
||
background: "none", border: "1px dashed #e0dcd4", cursor: "pointer",
|
||
borderRadius: 6, padding: "5px 10px", fontSize: "0.72rem", color: "#a09a90",
|
||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", width: "100%",
|
||
}}
|
||
onMouseEnter={e => (e.currentTarget.style.borderColor = "#b5b0a6")}
|
||
onMouseLeave={e => (e.currentTarget.style.borderColor = "#e0dcd4")}
|
||
>
|
||
+ Add
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function ChatImportMain({
|
||
projectId,
|
||
projectName,
|
||
sourceData,
|
||
analysisResult: initialResult,
|
||
}: ChatImportMainProps) {
|
||
const router = useRouter();
|
||
const params = useParams();
|
||
const workspace = params?.workspace as string;
|
||
|
||
const hasChatText = !!sourceData?.chatText;
|
||
const [stage, setStage] = useState<Stage>(
|
||
initialResult ? "review" : hasChatText ? "extracting" : "intake"
|
||
);
|
||
const [chatText, setChatText] = useState(sourceData?.chatText ?? "");
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [result, setResult] = useState<AnalysisResult>(
|
||
initialResult ?? { decisions: [], ideas: [], openQuestions: [], architecture: [], targetUsers: [] }
|
||
);
|
||
|
||
// Kick off extraction automatically if chatText is ready
|
||
useEffect(() => {
|
||
if (stage === "extracting") {
|
||
runExtraction();
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [stage]);
|
||
|
||
const runExtraction = async () => {
|
||
setError(null);
|
||
try {
|
||
const res = await fetch(`/api/projects/${projectId}/analyze-chats`, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ chatText }),
|
||
});
|
||
const data = await res.json();
|
||
if (!res.ok) throw new Error(data.error || "Extraction failed");
|
||
setResult(data.analysisResult);
|
||
setStage("review");
|
||
} catch (e) {
|
||
setError(e instanceof Error ? e.message : "Something went wrong");
|
||
setStage("intake");
|
||
}
|
||
};
|
||
|
||
const handlePRD = () => router.push(`/${workspace}/project/${projectId}/prd`);
|
||
const handleMVP = () => router.push(`/${workspace}/project/${projectId}/build`);
|
||
|
||
// ── Stage: intake ─────────────────────────────────────────────────────────
|
||
if (stage === "intake") {
|
||
return (
|
||
<div style={{ height: "100%", overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
|
||
<div style={{ width: "100%", maxWidth: 640, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||
<div style={{ marginBottom: 28 }}>
|
||
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
|
||
Paste your chat history
|
||
</h2>
|
||
<p style={{ fontSize: "0.82rem", color: "#a09a90", margin: 0 }}>
|
||
{projectName} — Atlas will extract decisions, ideas, architecture notes, and more.
|
||
</p>
|
||
</div>
|
||
|
||
{error && (
|
||
<div style={{ padding: "12px 16px", borderRadius: 8, background: "#fff0f0", border: "1px solid #fca5a5", color: "#991b1b", fontSize: "0.8rem", marginBottom: 16 }}>
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<textarea
|
||
value={chatText}
|
||
onChange={e => setChatText(e.target.value)}
|
||
placeholder={"Paste conversations from ChatGPT, Claude, Gemini, or any AI tool.\n\nCopy the full conversation — Atlas handles the cleanup."}
|
||
rows={14}
|
||
style={{
|
||
width: "100%", padding: "14px 16px", marginBottom: 16,
|
||
borderRadius: 10, border: "1px solid #e0dcd4",
|
||
background: "#faf8f5", fontSize: "0.85rem", lineHeight: 1.6,
|
||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
|
||
outline: "none", resize: "vertical", boxSizing: "border-box",
|
||
}}
|
||
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
|
||
onBlur={e => (e.currentTarget.style.borderColor = "#e0dcd4")}
|
||
/>
|
||
|
||
<button
|
||
onClick={() => {
|
||
if (chatText.trim().length > 20) {
|
||
setStage("extracting");
|
||
}
|
||
}}
|
||
disabled={chatText.trim().length < 20}
|
||
style={{
|
||
width: "100%", padding: "13px",
|
||
borderRadius: 8, border: "none",
|
||
background: chatText.trim().length > 20 ? "#1a1a1a" : "#e0dcd4",
|
||
color: chatText.trim().length > 20 ? "#fff" : "#b5b0a6",
|
||
fontSize: "0.9rem", fontWeight: 600,
|
||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||
cursor: chatText.trim().length > 20 ? "pointer" : "not-allowed",
|
||
}}
|
||
>
|
||
Extract insights →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Stage: extracting ─────────────────────────────────────────────────────
|
||
if (stage === "extracting") {
|
||
return (
|
||
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||
<div style={{ textAlign: "center" }}>
|
||
<div style={{
|
||
width: 48, height: 48, borderRadius: "50%",
|
||
border: "3px solid #e0dcd4", borderTopColor: "#1a1a1a",
|
||
animation: "vibn-chat-spin 0.8s linear infinite",
|
||
margin: "0 auto 20px",
|
||
}} />
|
||
<style>{`@keyframes vibn-chat-spin { to { transform:rotate(360deg); } }`}</style>
|
||
<h3 style={{ fontSize: "1.05rem", fontWeight: 600, color: "#1a1a1a", margin: "0 0 6px" }}>
|
||
Analysing your chats…
|
||
</h3>
|
||
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: 0 }}>
|
||
Atlas is extracting decisions, ideas, and insights
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Stage: review ─────────────────────────────────────────────────────────
|
||
return (
|
||
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||
<div style={{ maxWidth: 760, margin: "0 auto" }}>
|
||
<div style={{ marginBottom: 28 }}>
|
||
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
|
||
What Atlas found
|
||
</h2>
|
||
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: 0 }}>
|
||
Review and edit the extracted insights for <strong>{projectName}</strong>. These will seed your PRD or MVP plan.
|
||
</p>
|
||
</div>
|
||
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 28 }}>
|
||
{/* Left column */}
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||
<div style={{ background: "#fff", borderRadius: 12, border: "1px solid #e8e4dc", padding: "20px 22px" }}>
|
||
<EditableList
|
||
label="Decisions made"
|
||
items={result.decisions}
|
||
accent="#1a3a5c"
|
||
onChange={items => setResult(r => ({ ...r, decisions: items }))}
|
||
/>
|
||
</div>
|
||
<div style={{ background: "#fff", borderRadius: 12, border: "1px solid #e8e4dc", padding: "20px 22px" }}>
|
||
<EditableList
|
||
label="Ideas & features"
|
||
items={result.ideas}
|
||
accent="#2e5a4a"
|
||
onChange={items => setResult(r => ({ ...r, ideas: items }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{/* Right column */}
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||
<div style={{ background: "#fff", borderRadius: 12, border: "1px solid #e8e4dc", padding: "20px 22px" }}>
|
||
<EditableList
|
||
label="Open questions"
|
||
items={result.openQuestions}
|
||
accent="#9a7b3a"
|
||
onChange={items => setResult(r => ({ ...r, openQuestions: items }))}
|
||
/>
|
||
</div>
|
||
<div style={{ background: "#fff", borderRadius: 12, border: "1px solid #e8e4dc", padding: "20px 22px" }}>
|
||
<EditableList
|
||
label="Architecture notes"
|
||
items={result.architecture}
|
||
accent="#4a3728"
|
||
onChange={items => setResult(r => ({ ...r, architecture: items }))}
|
||
/>
|
||
</div>
|
||
<div style={{ background: "#fff", borderRadius: 12, border: "1px solid #e8e4dc", padding: "20px 22px" }}>
|
||
<EditableList
|
||
label="Target users"
|
||
items={result.targetUsers}
|
||
accent="#4a2a5a"
|
||
onChange={items => setResult(r => ({ ...r, targetUsers: items }))}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Decision buttons */}
|
||
<div style={{
|
||
background: "#1a1a1a", borderRadius: 12, padding: "22px 24px",
|
||
display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
|
||
}}>
|
||
<div>
|
||
<div style={{ fontSize: "0.88rem", fontWeight: 700, color: "#fff", marginBottom: 3 }}>Ready to move forward?</div>
|
||
<div style={{ fontSize: "0.75rem", color: "#8a8478" }}>Choose how you want to proceed with {projectName}.</div>
|
||
</div>
|
||
<div style={{ display: "flex", gap: 10 }}>
|
||
<button
|
||
onClick={handlePRD}
|
||
style={{
|
||
padding: "11px 22px", borderRadius: 8, border: "none",
|
||
background: "#fff", color: "#1a1a1a",
|
||
fontSize: "0.85rem", fontWeight: 700, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
|
||
}}
|
||
onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
|
||
onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
|
||
>
|
||
Generate PRD →
|
||
</button>
|
||
<button
|
||
onClick={handleMVP}
|
||
style={{
|
||
padding: "11px 22px", borderRadius: 8,
|
||
border: "1px solid rgba(255,255,255,0.2)", background: "transparent", color: "#fff",
|
||
fontSize: "0.85rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
|
||
}}
|
||
onMouseEnter={e => (e.currentTarget.style.background = "rgba(255,255,255,0.08)")}
|
||
onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
|
||
>
|
||
Plan MVP Test →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|