Skip to content

Commit 03a13cb

Browse files
Gus Hcursoragent
authored and
Gus H
committed
Improve chat completion UX and auto-open preview.
Lock the popup after send, show the submitted prompt read-only when done, auto-navigate to preview when the agent finishes, and use the Apple system font stack site-wide. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent a6aea03 commit 03a13cb

4 files changed

Lines changed: 227 additions & 137 deletions

File tree

‎src/app/globals.css‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
@theme inline {
88
--color-background: var(--background);
99
--color-foreground: var(--foreground);
10-
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
11-
--font-mono: var(--font-geist-mono);
12-
--font-heading: var(--font-display), var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
10+
--font-sans: var(--font-system);
11+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
12+
--font-heading: var(--font-system);
1313
--color-sidebar-ring: var(--sidebar-ring);
1414
--color-sidebar-border: var(--sidebar-border);
1515
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -142,10 +142,13 @@
142142
}
143143
body {
144144
background: var(--color-page);
145+
font-family: var(--font-system);
146+
font-size: var(--welcome-text-size);
147+
letter-spacing: var(--welcome-letter-spacing);
145148
@apply text-foreground;
146149
}
147150
html {
148-
@apply font-sans;
151+
font-family: var(--font-system);
149152
}
150153
}
151154

@@ -1116,6 +1119,44 @@
11161119
cursor: not-allowed;
11171120
}
11181121

1122+
.element-chat-popup-prompt-readonly {
1123+
flex: 1;
1124+
min-width: 0;
1125+
margin: 0;
1126+
font-family: inherit;
1127+
font-size: 13px;
1128+
line-height: 1.45;
1129+
letter-spacing: -0.01em;
1130+
color: rgba(17, 17, 17, 0.88);
1131+
}
1132+
1133+
.element-chat-popup-locked-hint {
1134+
font-family: inherit;
1135+
font-size: 12px;
1136+
color: rgba(17, 17, 17, 0.45);
1137+
}
1138+
1139+
.element-chat-popup-toolbar-spacer {
1140+
width: 26px;
1141+
}
1142+
1143+
.element-chat-popup-view-preview {
1144+
height: 28px;
1145+
padding: 0 12px;
1146+
border: none;
1147+
border-radius: 999px;
1148+
background: #2f6feb;
1149+
color: #ffffff;
1150+
font-family: inherit;
1151+
font-size: 12px;
1152+
font-weight: 600;
1153+
cursor: pointer;
1154+
}
1155+
1156+
.element-chat-popup-view-preview:hover {
1157+
background: #255fd4;
1158+
}
1159+
11191160
.element-chat-popup-toolbar {
11201161
display: grid;
11211162
grid-template-columns: auto 1fr auto;

‎src/app/layout.tsx‎

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,6 @@
11
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono, Plus_Jakarta_Sans, Sora } from "next/font/google";
32
import "./globals.css";
43

5-
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
8-
});
9-
10-
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
13-
});
14-
15-
const plusJakarta = Plus_Jakarta_Sans({
16-
variable: "--font-ui",
17-
subsets: ["latin"],
18-
});
19-
20-
const sora = Sora({
21-
variable: "--font-display",
22-
subsets: ["latin"],
23-
});
24-
254
export const metadata: Metadata = {
265
title: "parse-nip · popped.dev",
276
description:
@@ -41,11 +20,7 @@ export default function RootLayout({
4120
}>) {
4221
return (
4322
<html lang="en">
44-
<body
45-
className={`${geistSans.variable} ${geistMono.variable} ${plusJakarta.variable} ${sora.variable} min-h-screen antialiased`}
46-
>
47-
{children}
48-
</body>
23+
<body className="min-h-screen antialiased">{children}</body>
4924
</html>
5025
);
5126
}

‎src/components/design/DesignSelectLayerActive.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,16 @@ export function DesignSelectLayerActive() {
4545
const [chat, setChat] = useState<ChatState | null>(null);
4646
const [highlight, setHighlight] = useState<Rect | null>(null);
4747

48+
const handlePreviewReady = useCallback(
49+
(params: Parameters<typeof showPreview>[0]) => {
50+
showPreview(params);
51+
setChat(null);
52+
setHover(null);
53+
setHighlight(null);
54+
},
55+
[showPreview],
56+
);
57+
4858
useEffect(() => {
4959
document.body.dataset.cursorMode = "design";
5060
return () => {
@@ -164,7 +174,7 @@ export function DesignSelectLayerActive() {
164174
elementLabel={chat.label}
165175
elementContext={buildElementContext(chat.element)}
166176
onClose={clearSelection}
167-
onPreviewReady={showPreview}
177+
onPreviewReady={handlePreviewReady}
168178
/>
169179
) : null}
170180
</>,

0 commit comments

Comments
 (0)