feat: add quick-action chips above chat input (suggestions, importance, move on)
Made-with: Cursor
This commit is contained in:
@@ -489,8 +489,44 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Quick-action chips — shown when there's a conversation and AI isn't typing */}
|
||||||
|
{!isEmpty && !isStreaming && (
|
||||||
|
<div style={{ padding: "0 32px 8px", display: "flex", gap: 6, flexWrap: "wrap" }}>
|
||||||
|
{[
|
||||||
|
{ label: "Give me suggestions", prompt: "Can you give me some examples or suggestions to help me think through this?" },
|
||||||
|
{ label: "What's most important?", prompt: "What's the most important thing for me to nail down right now?" },
|
||||||
|
{ label: "Move on", prompt: "That's enough detail for now — let's move to the next phase." },
|
||||||
|
].map(({ label, prompt }) => (
|
||||||
|
<button
|
||||||
|
key={label}
|
||||||
|
onClick={() => sendToAtlas(prompt, false)}
|
||||||
|
style={{
|
||||||
|
padding: "5px 12px", borderRadius: 20,
|
||||||
|
border: "1px solid #e0dcd4",
|
||||||
|
background: "#fff", color: "#6b6560",
|
||||||
|
fontSize: "0.73rem", fontFamily: "Outfit, sans-serif",
|
||||||
|
cursor: "pointer", transition: "all 0.1s",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
onMouseEnter={e => {
|
||||||
|
(e.currentTarget as HTMLElement).style.background = "#f0ece4";
|
||||||
|
(e.currentTarget as HTMLElement).style.borderColor = "#c8c4bc";
|
||||||
|
(e.currentTarget as HTMLElement).style.color = "#1a1a1a";
|
||||||
|
}}
|
||||||
|
onMouseLeave={e => {
|
||||||
|
(e.currentTarget as HTMLElement).style.background = "#fff";
|
||||||
|
(e.currentTarget as HTMLElement).style.borderColor = "#e0dcd4";
|
||||||
|
(e.currentTarget as HTMLElement).style.color = "#6b6560";
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Input bar */}
|
{/* Input bar */}
|
||||||
<div style={{ padding: "14px 32px max(22px, env(safe-area-inset-bottom))", flexShrink: 0 }}>
|
<div style={{ padding: "6px 32px max(22px, env(safe-area-inset-bottom))", flexShrink: 0 }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
display: "flex", gap: 8, padding: "5px 5px 5px 16px",
|
display: "flex", gap: 8, padding: "5px 5px 5px 16px",
|
||||||
background: "#fff", border: "1px solid #e0dcd4", borderRadius: 10,
|
background: "#fff", border: "1px solid #e0dcd4", borderRadius: 10,
|
||||||
|
|||||||
Reference in New Issue
Block a user