Skip to content

Commit fca4a3d

Browse files
committed
feat(ai-chat): redesign browser-build placeholder per new spec
Replaces the centered icon/title/message layout with a left-aligned header (Design, fix and build faster), the existing video card, three info cards (Generate Layout / Fix Bugs / Suggest improvements with FA icons table-cells-large, bug-slash, wand-sparkles), the desktop-only body copy, and a full-width CTA. Strings: adds AI_CHAT_PLACEHOLDER_* keys (title, subtitle, three card title/desc pairs); reuses AI_CHAT_DESKTOP_ONLY for the body to avoid duplicating what the cards already say. Drops the now-unused AI_CHAT_TITLE_NO_AI from the root locale (other locale files will re-sync via GitHub Actions). CSS: new .ai-placeholder column styles with min-width:0 and explicit white-space:normal so text wraps when the sidebar is narrow (the panel inherits white-space:nowrap from chat-message defaults). The CTA gets a 14px-padded, 8px-radius treatment that matches the cards and beats the shared .btn.btn-primary override; the shared override itself is widened to also re-apply the standard primary look inside .ai-placeholder.
1 parent 707d189 commit fca4a3d

2 files changed

Lines changed: 162 additions & 3 deletions

File tree

src/nls/root/strings.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2151,7 +2151,6 @@ define({
21512151
"AI_UPSELL_DIALOG_MESSAGE": "You’ve discovered {0}. To proceed, you’ll need an AI subscription or credits.",
21522152

21532153
// AI CHAT PANEL
2154-
"AI_CHAT_TITLE_NO_AI": "Phoenix Code AI",
21552154
"AI_CHAT_TITLE": "Claude Code",
21562155
"AI_CHAT_SURPRISE_ME_USER_MSG": "Surprise me!",
21572156
"AI_CHAT_NEW_SESSION_TITLE": "Start a new conversation",
@@ -2173,6 +2172,14 @@ define({
21732172
"AI_CHAT_RETRY": "Retry",
21742173
"AI_CHAT_DESKTOP_ONLY": "AI features require the Phoenix desktop app. Download it to get started.",
21752174
"AI_CHAT_DOWNLOAD_BTN": "Download Desktop App",
2175+
"AI_CHAT_PLACEHOLDER_TITLE": "Design, fix and build faster",
2176+
"AI_CHAT_PLACEHOLDER_SUBTITLE": "AI that works along your preview",
2177+
"AI_CHAT_PLACEHOLDER_CARD_LAYOUT_TITLE": "Generate Layout",
2178+
"AI_CHAT_PLACEHOLDER_CARD_LAYOUT_DESC": "Describe a section",
2179+
"AI_CHAT_PLACEHOLDER_CARD_BUGS_TITLE": "Fix Bugs",
2180+
"AI_CHAT_PLACEHOLDER_CARD_BUGS_DESC": "Scan for issues",
2181+
"AI_CHAT_PLACEHOLDER_CARD_IMPROVE_TITLE": "Suggest improvements",
2182+
"AI_CHAT_PLACEHOLDER_CARD_IMPROVE_DESC": "UX & performance tips",
21762183
"AI_CHAT_LOGIN_TITLE": "Sign In to Use AI",
21772184
"AI_CHAT_LOGIN_MESSAGE": "Sign in to your {APP_NAME} account to access AI features.",
21782185
"AI_CHAT_LOGIN_BTN": "Sign In",

src/styles/Extn-AIChatPanel.less

Lines changed: 154 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2840,14 +2840,165 @@
28402840
}
28412841
}
28422842

2843+
/* Browser-build placeholder layout (designed by the team — left-aligned
2844+
header, video, three info cards, body copy, full-width CTA). Used only
2845+
when the browser app can't run AI features, so the panel doubles as a
2846+
marketing surface for the desktop app. */
2847+
2848+
.ai-placeholder {
2849+
display: flex;
2850+
flex-direction: column;
2851+
gap: 1.1rem;
2852+
padding: 1.25rem 1.25rem 1.5rem;
2853+
box-sizing: border-box;
2854+
/* Allow the column to shrink below its intrinsic content size when the
2855+
sidebar is narrow, otherwise long words like "improvements" force a
2856+
horizontal scroll. min-width:0 alone isn't enough on a flex column —
2857+
the inner cards' default min-width:auto prevents shrink. */
2858+
min-width: 0;
2859+
width: 100%;
2860+
2861+
/* The chat panel sets `white-space: nowrap` higher up so streaming
2862+
chat lines don't reflow mid-token. Reset it here so all text in the
2863+
placeholder wraps normally when the sidebar is narrow. */
2864+
&, * {
2865+
white-space: normal;
2866+
}
2867+
}
2868+
2869+
.ai-placeholder-header {
2870+
display: flex;
2871+
flex-direction: column;
2872+
gap: 4px;
2873+
}
2874+
2875+
.ai-placeholder-title {
2876+
font-size: 22px;
2877+
font-weight: 700;
2878+
line-height: 1.2;
2879+
margin: 0;
2880+
color: @project-panel-text-1;
2881+
letter-spacing: -0.01em;
2882+
}
2883+
2884+
.ai-placeholder-subtitle {
2885+
font-size: 13px;
2886+
color: @project-panel-text-2;
2887+
opacity: 0.85;
2888+
line-height: 1.4;
2889+
}
2890+
2891+
/* Video slot in the placeholder: full-width, no max cap (the surrounding
2892+
`.ai-placeholder` panel padding controls effective width). The shared
2893+
`.ai-intro-video-slot` rule above is centered and capped at 320px,
2894+
which would look orphaned in the new left-aligned layout. */
2895+
.ai-placeholder .ai-intro-video-slot {
2896+
max-width: none;
2897+
margin: 0;
2898+
text-align: left;
2899+
gap: 0;
2900+
}
2901+
2902+
.ai-placeholder-cards {
2903+
list-style: none;
2904+
margin: 0;
2905+
padding: 0;
2906+
display: flex;
2907+
flex-direction: column;
2908+
gap: 8px;
2909+
}
2910+
2911+
.ai-placeholder-card {
2912+
display: flex;
2913+
align-items: center;
2914+
gap: 12px;
2915+
padding: 10px 12px;
2916+
border: 1px solid rgba(255, 255, 255, 0.06);
2917+
border-radius: 8px;
2918+
background: rgba(255, 255, 255, 0.025);
2919+
/* Allow the card to shrink at narrow sidebar widths instead of forcing
2920+
a horizontal scroll. */
2921+
min-width: 0;
2922+
}
2923+
2924+
.ai-placeholder-card-icon {
2925+
flex: 0 0 auto;
2926+
display: inline-flex;
2927+
align-items: center;
2928+
justify-content: center;
2929+
width: 32px;
2930+
height: 32px;
2931+
border-radius: 6px;
2932+
background: rgba(255, 255, 255, 0.04);
2933+
color: @project-panel-text-1;
2934+
font-size: 14px;
2935+
}
2936+
2937+
.ai-placeholder-card-text {
2938+
display: flex;
2939+
flex-direction: column;
2940+
gap: 2px;
2941+
min-width: 0;
2942+
flex: 1 1 auto;
2943+
}
2944+
2945+
.ai-placeholder-card-title,
2946+
.ai-placeholder-card-desc {
2947+
/* Wrap long localized strings instead of overflowing the card. */
2948+
overflow-wrap: anywhere;
2949+
word-break: break-word;
2950+
}
2951+
2952+
.ai-placeholder-card-title {
2953+
font-size: 13.5px;
2954+
font-weight: 600;
2955+
color: @project-panel-text-1;
2956+
line-height: 1.25;
2957+
}
2958+
2959+
.ai-placeholder-card-desc {
2960+
font-size: 12px;
2961+
color: @project-panel-text-2;
2962+
opacity: 0.8;
2963+
line-height: 1.3;
2964+
}
2965+
2966+
.ai-placeholder-body {
2967+
font-size: 12.5px;
2968+
color: @project-panel-text-2;
2969+
opacity: 0.75;
2970+
line-height: 1.5;
2971+
margin: 4px 0 0;
2972+
}
2973+
2974+
/* The shared `.btn.btn-primary` override above sets padding: 6px 18px
2975+
for the older Sign-In CTA. `!important` here locks in the designer's
2976+
taller spec for this placeholder CTA without having to thread a more
2977+
specific selector through every inherited declaration. */
2978+
.ai-chat-panel .ai-placeholder .ai-placeholder-cta {
2979+
width: 100%;
2980+
padding: 14px 18px !important;
2981+
font-size: 14px;
2982+
font-weight: 600;
2983+
line-height: 1.3;
2984+
/* Match the 8px corner radius of the cards above so the column reads
2985+
as one coherent stack. The shared .btn.btn-primary rule sets 4px,
2986+
hence !important. */
2987+
border-radius: 8px !important;
2988+
/* Reset horizontal margins — a higher-up `.btn` rule adds
2989+
`margin-left: 3px` which would shift the CTA right of the cards. */
2990+
margin: 4px 0 0;
2991+
}
2992+
28432993
/* Re-apply Phoenix's standard `.btn .btn-primary` look inside the
28442994
.ai-unavailable intro states. The blanket reset below (`.ai-chat-panel
28452995
.btn-primary`) blanks bootstrap's button styling so chat-area buttons
28462996
can use their own custom styles; here we want the regular primary
28472997
button so the Sign In CTA reads as the standard Phoenix action. The
28482998
selector is more specific than the reset, and `!important` belt-and-
28492999
braces against any later reset rule that might still apply. */
2850-
.ai-chat-panel .ai-unavailable .btn.btn-primary {
3000+
.ai-chat-panel .ai-unavailable .btn.btn-primary,
3001+
.ai-chat-panel .ai-placeholder .btn.btn-primary {
28513002
display: inline-block;
28523003
background-color: @bc-primary-btn-bg !important;
28533004
background-image: none !important;
@@ -2876,7 +3027,8 @@
28763027
}
28773028
}
28783029

2879-
.dark .ai-chat-panel .ai-unavailable .btn.btn-primary {
3030+
.dark .ai-chat-panel .ai-unavailable .btn.btn-primary,
3031+
.dark .ai-chat-panel .ai-placeholder .btn.btn-primary {
28803032
background-color: @dark-bc-primary-btn-bg !important;
28813033
border-color: darken(@dark-bc-primary-btn-bg, 8%) !important;
28823034

0 commit comments

Comments
 (0)