feat(chat): render architecture generation button from NEXT_STEP marker
- Detect [[NEXT_STEP:{...}]] marker in Atlas messages alongside existing
[[PHASE_COMPLETE:{...}]] - extracted via extractMarkers()
- When action=generate_architecture, render an inline action card in
the chat: button calls POST /architecture, shows spinner while
generating, then success state with direct link to Build tab
- Add spin keyframe; thread workspace param through MessageRow
Made-with: Cursor
This commit is contained in:
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
interface ChatMessage {
|
||||
role: "user" | "assistant";
|
||||
@@ -14,9 +16,11 @@ interface AtlasChatProps {
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Phase marker — Atlas appends [[PHASE_COMPLETE:{...}]] when a phase wraps up
|
||||
// Markers — Atlas appends these at end of messages to signal UI actions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const PHASE_MARKER_RE = /\[\[PHASE_COMPLETE:(.*?)\]\]/s;
|
||||
const NEXT_STEP_RE = /\[\[NEXT_STEP:(.*?)\]\]/s;
|
||||
|
||||
interface PhasePayload {
|
||||
phase: string;
|
||||
@@ -25,15 +29,33 @@ interface PhasePayload {
|
||||
data: Record<string, unknown>;
|
||||
}
|
||||
|
||||
function extractPhase(text: string): { clean: string; phase: PhasePayload | null } {
|
||||
const match = text.match(PHASE_MARKER_RE);
|
||||
if (!match) return { clean: text, phase: null };
|
||||
try {
|
||||
const phase = JSON.parse(match[1]) as PhasePayload;
|
||||
return { clean: text.replace(PHASE_MARKER_RE, "").trimEnd(), phase };
|
||||
} catch {
|
||||
return { clean: text.replace(PHASE_MARKER_RE, "").trimEnd(), phase: null };
|
||||
interface NextStepPayload {
|
||||
action: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function extractMarkers(text: string): {
|
||||
clean: string;
|
||||
phase: PhasePayload | null;
|
||||
nextStep: NextStepPayload | null;
|
||||
} {
|
||||
let clean = text;
|
||||
let phase: PhasePayload | null = null;
|
||||
let nextStep: NextStepPayload | null = null;
|
||||
|
||||
const phaseMatch = clean.match(PHASE_MARKER_RE);
|
||||
if (phaseMatch) {
|
||||
try { phase = JSON.parse(phaseMatch[1]); } catch { /* ignore */ }
|
||||
clean = clean.replace(PHASE_MARKER_RE, "").trimEnd();
|
||||
}
|
||||
|
||||
const nextMatch = clean.match(NEXT_STEP_RE);
|
||||
if (nextMatch) {
|
||||
try { nextStep = JSON.parse(nextMatch[1]); } catch { /* ignore */ }
|
||||
clean = clean.replace(NEXT_STEP_RE, "").trimEnd();
|
||||
}
|
||||
|
||||
return { clean, phase, nextStep };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -54,12 +76,27 @@ function renderContent(text: string | null | undefined) {
|
||||
// ---------------------------------------------------------------------------
|
||||
// Message row
|
||||
// ---------------------------------------------------------------------------
|
||||
function MessageRow({ msg, userInitial, projectId }: { msg: ChatMessage; userInitial: string; projectId: string }) {
|
||||
function MessageRow({
|
||||
msg, userInitial, projectId, workspace,
|
||||
}: {
|
||||
msg: ChatMessage;
|
||||
userInitial: string;
|
||||
projectId: string;
|
||||
workspace: string;
|
||||
}) {
|
||||
const isAtlas = msg.role === "assistant";
|
||||
const { clean, phase } = isAtlas ? extractPhase(msg.content ?? "") : { clean: msg.content ?? "", phase: null };
|
||||
const { clean, phase, nextStep } = isAtlas
|
||||
? extractMarkers(msg.content ?? "")
|
||||
: { clean: msg.content ?? "", phase: null, nextStep: null };
|
||||
|
||||
// Phase save state
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Architecture generation state
|
||||
const [archState, setArchState] = useState<"idle" | "loading" | "done" | "error">("idle");
|
||||
const [archError, setArchError] = useState<string | null>(null);
|
||||
|
||||
const handleSavePhase = async () => {
|
||||
if (!phase || saved || saving) return;
|
||||
setSaving(true);
|
||||
@@ -70,13 +107,30 @@ function MessageRow({ msg, userInitial, projectId }: { msg: ChatMessage; userIni
|
||||
body: JSON.stringify(phase),
|
||||
});
|
||||
setSaved(true);
|
||||
} catch {
|
||||
// swallow — user can retry
|
||||
} finally {
|
||||
} catch { /* swallow — user can retry */ } finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateArchitecture = async () => {
|
||||
if (archState !== "idle") return;
|
||||
setArchState("loading");
|
||||
setArchError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}/architecture`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
const d = await res.json();
|
||||
if (!res.ok) throw new Error(d.error || "Generation failed");
|
||||
setArchState("done");
|
||||
} catch (e) {
|
||||
setArchError(e instanceof Error ? e.message : "Something went wrong");
|
||||
setArchState("error");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", gap: 12, marginBottom: 22, animation: "enter 0.3s ease both" }}>
|
||||
{/* Avatar */}
|
||||
@@ -107,7 +161,8 @@ function MessageRow({ msg, userInitial, projectId }: { msg: ChatMessage; userIni
|
||||
}}>
|
||||
{renderContent(clean)}
|
||||
</div>
|
||||
{/* Phase save button — only shown when Atlas signals phase completion */}
|
||||
|
||||
{/* Phase save button */}
|
||||
{phase && (
|
||||
<div style={{ marginTop: 14 }}>
|
||||
<button
|
||||
@@ -138,6 +193,87 @@ function MessageRow({ msg, userInitial, projectId }: { msg: ChatMessage; userIni
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Next step — architecture generation */}
|
||||
{nextStep?.action === "generate_architecture" && (
|
||||
<div style={{
|
||||
marginTop: 16,
|
||||
padding: "16px 18px",
|
||||
background: "#fff",
|
||||
border: "1px solid #e8e4dc",
|
||||
borderRadius: 10,
|
||||
borderLeft: "3px solid #1a1a1a",
|
||||
}}>
|
||||
{archState === "done" ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#2e7d32", marginBottom: 6 }}>
|
||||
✓ Architecture generated
|
||||
</div>
|
||||
<p style={{ fontSize: "0.76rem", color: "#6b6560", margin: "0 0 12px", lineHeight: 1.5 }}>
|
||||
Review the recommended apps, services, and infrastructure — then confirm when you're ready.
|
||||
</p>
|
||||
<Link
|
||||
href={`/${workspace}/project/${projectId}/build`}
|
||||
style={{
|
||||
display: "inline-block", padding: "8px 16px", borderRadius: 7,
|
||||
background: "#1a1a1a", color: "#fff",
|
||||
fontSize: "0.76rem", fontWeight: 600,
|
||||
fontFamily: "Outfit, sans-serif", textDecoration: "none",
|
||||
}}
|
||||
>
|
||||
Review architecture →
|
||||
</Link>
|
||||
</div>
|
||||
) : archState === "error" ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#c62828", marginBottom: 8 }}>
|
||||
⚠ {archError}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { setArchState("idle"); setArchError(null); }}
|
||||
style={{
|
||||
padding: "7px 14px", borderRadius: 6, border: "1px solid #e0dcd4",
|
||||
background: "none", fontSize: "0.74rem", color: "#6b6560",
|
||||
fontFamily: "Outfit, sans-serif", cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 5 }}>
|
||||
Next: Technical architecture
|
||||
</div>
|
||||
<p style={{ fontSize: "0.76rem", color: "#6b6560", margin: "0 0 14px", lineHeight: 1.55 }}>
|
||||
The AI will read your PRD and recommend the apps, services, and infrastructure your product needs. Takes about 30 seconds.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleGenerateArchitecture}
|
||||
disabled={archState === "loading"}
|
||||
style={{
|
||||
display: "inline-flex", alignItems: "center", gap: 8,
|
||||
padding: "9px 18px", borderRadius: 8, border: "none",
|
||||
background: archState === "loading" ? "#8a8478" : "#1a1a1a",
|
||||
color: "#fff", fontSize: "0.78rem", fontWeight: 600,
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
cursor: archState === "loading" ? "default" : "pointer",
|
||||
transition: "background 0.15s",
|
||||
}}
|
||||
>
|
||||
{archState === "loading" && (
|
||||
<span style={{
|
||||
width: 12, height: 12, borderRadius: "50%",
|
||||
border: "2px solid #ffffff40", borderTopColor: "#fff",
|
||||
animation: "spin 0.7s linear infinite", display: "inline-block",
|
||||
}} />
|
||||
)}
|
||||
{archState === "loading" ? "Analysing PRD…" : nextStep.label}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -171,6 +307,8 @@ function TypingIndicator() {
|
||||
// ---------------------------------------------------------------------------
|
||||
export function AtlasChat({ projectId }: AtlasChatProps) {
|
||||
const { data: session } = useSession();
|
||||
const params = useParams();
|
||||
const workspace = (params?.workspace as string) ?? "";
|
||||
const userInitial =
|
||||
session?.user?.name?.[0]?.toUpperCase() ??
|
||||
session?.user?.email?.[0]?.toUpperCase() ??
|
||||
@@ -292,6 +430,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
|
||||
<style>{`
|
||||
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:.8} }
|
||||
@keyframes enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
|
||||
@keyframes spin { to { transform:rotate(360deg); } }
|
||||
`}</style>
|
||||
|
||||
{/* Empty state */}
|
||||
@@ -336,7 +475,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
|
||||
Reset
|
||||
</button>
|
||||
{visibleMessages.map((msg, i) => (
|
||||
<MessageRow key={i} msg={msg} userInitial={userInitial} projectId={projectId} />
|
||||
<MessageRow key={i} msg={msg} userInitial={userInitial} projectId={projectId} workspace={workspace} />
|
||||
))}
|
||||
{isStreaming && <TypingIndicator />}
|
||||
<div ref={endRef} />
|
||||
|
||||
Reference in New Issue
Block a user