mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): warm welcome + suggested prompts for empty threads

Browse Source 
The smoke-test runbook step 3 promised 'AI should greet you and
offer to scaffold something' but the empty-thread state was just
a logo + tagline. Replaced with:

- Project-aware greeting ('Welcome to <project name>.')
- One paragraph that names the affordances (paste brief, drop
  link, pick a starter)
- Four click-to-prefill suggestion chips that map to the smoke
  test entry points: scaffold a todo app, walk through a scope
  doc, plan a new idea, tour Vibn's capabilities.

Chips set the input value; user still hits send to commit.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mark Henderson
2026-05-01 13:37:51 -07:00
parent 95793d061b
commit 7ce8909555
1 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
components/vibn-chat/chat-panel.tsx
View File

@@ -846,20 +846,70 @@ export function ChatPanel() {
{/* Messages */}
<div style={{ flex: 1, overflowY: "auto", padding: "16px 14px" }}>
{messages.length === 0 && !sending && (
<div style={{ textAlign: "center", paddingTop: 40 }}>
<div style={{
width: 40, height: 40, borderRadius: "50%", background: "#1a1a1a",
display: "flex", alignItems: "center", justifyContent: "center",
margin: "0 auto 12px",
}}>
<span style={{ color: "#fff", fontSize: "1rem", fontFamily: "var(--font-lora),serif" }}>V</span>
<div style={{ paddingTop: 40, paddingBottom: 16, maxWidth: 540, margin: "0 auto" }}>
<div style={{ textAlign: "center", marginBottom: 28 }}>
<div style={{
width: 48, height: 48, borderRadius: "50%", background: "#1a1a1a",
display: "flex", alignItems: "center", justifyContent: "center",
margin: "0 auto 14px",
}}>
<span style={{ color: "#fff", fontSize: "1.15rem", fontFamily: "var(--font-lora),serif" }}>V</span>
</div>
<p style={{ fontSize: "1.05rem", fontWeight: 500, color: "#1a1a1a", marginBottom: 6, fontFamily: "var(--font-lora),serif" }}>
{activeProjectName ? `Welcome to ${activeProjectName}.` : "Welcome to Vibn."}
</p>
<p style={{ fontSize: "0.85rem", color: "#a09a90", lineHeight: 1.55, maxWidth: 420, margin: "0 auto" }}>
Tell me what you want to build and I&apos;ll scaffold it, run it in a preview, and ship it when you say so. Paste a brief, drop a link, or pick one of these to start:
</p>
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
{[
{
label: "Build a Next.js todo app",
prompt: "Build me a simple Next.js todo app. Scaffold it, start the preview, and walk me through what you did.",
},
{
label: "Walk through my scope doc",
prompt: "I'm going to paste a scope document next. Read it, summarize the product in 3 bullet points, and tell me what you'd build first.",
},
{
label: "Help me plan a new idea",
prompt: "I have a rough product idea. Ask me 3-5 questions to understand it, then propose a Plan we can work from.",
},
{
label: "Show me what you can do",
prompt: "Give me a 30-second tour of what you can do as Vibn. Keep it concrete — what tools you have, what you'd ship in the next 5 minutes if I said go.",
},
].map((s) => (
<button
key={s.label}
type="button"
onClick={() => setInput(s.prompt)}
style={{
textAlign: "left",
padding: "12px 14px",
borderRadius: 10,
border: "1px solid #ece8e2",
background: "#fdfcfa",
fontSize: "0.83rem",
color: "#1a1a1a",
cursor: "pointer",
transition: "background 0.12s, border-color 0.12s",
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = "#f6f2ec";
e.currentTarget.style.borderColor = "#d9d2c5";
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = "#fdfcfa";
e.currentTarget.style.borderColor = "#ece8e2";
}}
>
{s.label}
</button>
))}
</div>
<p style={{ fontSize: "0.88rem", fontWeight: 500, color: "#1a1a1a", marginBottom: 4 }}>
Vibn AI
</p>
<p style={{ fontSize: "0.78rem", color: "#a09a90", lineHeight: 1.5 }}>
Ask me to deploy an app, register a domain,<br />or help plan your next product.
</p>
</div>
)}