feat: top navbar (Build|Market|Assist) + persistent Assist chat in shell
- New top navbar in ProjectShell: logo + project name | Build | Market | Assist tabs | user avatar — replaces the left icon sidebar for project pages - CooChat extracted to components/layout/coo-chat.tsx and moved into the shell so it persists across Build/Market/Assist route changes - Build page inner layout simplified: inner nav (200px) + file viewer, no longer owns the chat column - Layout: [top nav 48px] / [Assist chat 320px | content flex] Made-with: Cursor
This commit is contained in:
191
components/layout/coo-chat.tsx
Normal file
191
components/layout/coo-chat.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
interface CooMessage {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
streaming?: boolean;
|
||||
}
|
||||
|
||||
const WELCOME: CooMessage = {
|
||||
id: "welcome",
|
||||
role: "assistant",
|
||||
content: "Hi. I'm your product COO — I know your codebase, your goals, and what's been built. What do you need?",
|
||||
};
|
||||
|
||||
export function CooChat({ projectId }: { projectId: string }) {
|
||||
const [messages, setMessages] = useState<CooMessage[]>([WELCOME]);
|
||||
const [input, setInput] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const send = async () => {
|
||||
const text = input.trim();
|
||||
if (!text || loading) return;
|
||||
setInput("");
|
||||
|
||||
const userMsg: CooMessage = { id: Date.now().toString(), role: "user", content: text };
|
||||
const assistantId = (Date.now() + 1).toString();
|
||||
const assistantMsg: CooMessage = { id: assistantId, role: "assistant", content: "", streaming: true };
|
||||
|
||||
setMessages(prev => [...prev, userMsg, assistantMsg]);
|
||||
setLoading(true);
|
||||
|
||||
const history = messages
|
||||
.filter(m => m.id !== "welcome" && m.content)
|
||||
.map(m => ({ role: m.role === "assistant" ? "model" as const : "user" as const, content: m.content }));
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}/advisor`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: text, history }),
|
||||
});
|
||||
|
||||
if (!res.ok || !res.body) {
|
||||
setMessages(prev => prev.map(m => m.id === assistantId
|
||||
? { ...m, content: "Something went wrong. Please try again.", streaming: false }
|
||||
: m));
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
setMessages(prev => prev.map(m => m.id === assistantId
|
||||
? { ...m, content: m.content + chunk }
|
||||
: m));
|
||||
}
|
||||
|
||||
setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, streaming: false } : m));
|
||||
} catch {
|
||||
setMessages(prev => prev.map(m => m.id === assistantId
|
||||
? { ...m, content: "Connection error. Please try again.", streaming: false }
|
||||
: m));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
textareaRef.current?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
{/* Messages */}
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "16px 14px 8px", display: "flex", flexDirection: "column", gap: 14 }}>
|
||||
{messages.map(msg => (
|
||||
<div key={msg.id} style={{
|
||||
display: "flex",
|
||||
flexDirection: msg.role === "user" ? "row-reverse" : "row",
|
||||
alignItems: "flex-end",
|
||||
gap: 7,
|
||||
}}>
|
||||
{msg.role === "assistant" && (
|
||||
<span style={{
|
||||
width: 20, height: 20, borderRadius: 5, background: "#1a1a1a",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.52rem", color: "#fff", flexShrink: 0,
|
||||
}}>◈</span>
|
||||
)}
|
||||
<div style={{
|
||||
maxWidth: "84%",
|
||||
padding: msg.role === "user" ? "8px 11px" : "0",
|
||||
background: msg.role === "user" ? "#f0ece4" : "transparent",
|
||||
borderRadius: msg.role === "user" ? 11 : 0,
|
||||
fontSize: "0.79rem",
|
||||
color: "#1a1a1a",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
lineHeight: 1.6,
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}>
|
||||
{msg.content}
|
||||
{msg.streaming && msg.content === "" && (
|
||||
<span style={{ display: "inline-flex", gap: 3, alignItems: "center", height: "1em" }}>
|
||||
{[0, 1, 2].map(i => (
|
||||
<span key={i} style={{
|
||||
width: 4, height: 4, borderRadius: "50%",
|
||||
background: "#b5b0a6", display: "inline-block",
|
||||
animation: `cooBounce 1.2s ${i * 0.2}s ease-in-out infinite`,
|
||||
}} />
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
{msg.streaming && msg.content !== "" && (
|
||||
<span style={{
|
||||
display: "inline-block", width: 2, height: "0.85em",
|
||||
background: "#1a1a1a", marginLeft: 1,
|
||||
verticalAlign: "text-bottom",
|
||||
animation: "cooBlink 1s step-end infinite",
|
||||
}} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div style={{ flexShrink: 0, borderTop: "1px solid #e8e4dc", padding: "10px 12px 10px", background: "#fff" }}>
|
||||
<div style={{ display: "flex", gap: 7, alignItems: "flex-end" }}>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); }
|
||||
}}
|
||||
placeholder={loading ? "Thinking…" : "Ask anything…"}
|
||||
disabled={loading}
|
||||
rows={2}
|
||||
style={{
|
||||
flex: 1, resize: "none",
|
||||
border: "1px solid #e8e4dc", borderRadius: 10,
|
||||
padding: "8px 10px", fontSize: "0.79rem",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
color: "#1a1a1a", outline: "none",
|
||||
background: "#faf8f5", lineHeight: 1.5,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={send}
|
||||
disabled={!input.trim() || loading}
|
||||
style={{
|
||||
width: 32, height: 32, flexShrink: 0,
|
||||
border: "none", borderRadius: 8,
|
||||
background: input.trim() && !loading ? "#1a1a1a" : "#e8e4dc",
|
||||
color: input.trim() && !loading ? "#fff" : "#b5b0a6",
|
||||
cursor: input.trim() && !loading ? "pointer" : "default",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>↑</button>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.6rem", color: "#c5c0b8", marginTop: 5, fontFamily: "Outfit, sans-serif" }}>
|
||||
↵ send · Shift+↵ newline
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes cooBounce {
|
||||
0%, 60%, 100% { transform: translateY(0); }
|
||||
30% { transform: translateY(-4px); }
|
||||
}
|
||||
@keyframes cooBlink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user