Skip to content

Commit 0944455

Browse files
eli-w-kingeli-w-king
authored
Merge pull request microsoft#268998 from microsoft/eli/prompt-tile-style-clean
suggested prompt style and reposition
2 parents b5dc5c5 + 2be96ab commit 0944455

2 files changed

Lines changed: 95 additions & 75 deletions

File tree

‎src/vs/workbench/contrib/chat/browser/media/chatViewWelcome.css‎

Lines changed: 92 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515

1616
/* Container for chat widget welcome message and interactive session variants */
1717
.interactive-session {
18+
position: relative; /* Enable absolute positioning for child elements */
19+
display: flex;
20+
flex-direction: column;
21+
height: 100%;
22+
1823
&.new-welcome-view {
1924
.interactive-input-part {
2025
.dropdown-action-container { display: none; }
@@ -27,36 +32,25 @@
2732
/* chat welcome container */
2833
.chat-welcome-view-container {
2934
display: flex;
35+
flex-direction: column;
3036
align-items: center;
3137
justify-content: center;
3238
overflow: hidden;
39+
flex: 1;
40+
position: relative; /* Allow absolute positioning of prompts */
3341

3442
&.has-chat-history {
43+
/* Reintroduce minimal layout so welcome block centers vertically when history is shown */
3544
flex-direction: column;
36-
justify-content: flex-start;
37-
align-items: stretch;
3845
height: 100%;
39-
position: relative;
40-
div.chat-welcome-view > .chat-welcome-view-title { display: none; }
41-
.chat-welcome-view-icon .codicon { line-height: 48px; }
46+
/* Keep default align-items/justify-content from base (center) so history list sits above, then auto margins center welcome */
4247
div.chat-welcome-view { align-self: center; margin-top: auto; margin-bottom: auto; }
43-
.chat-welcome-view-message.empty-state,
44-
.chat-welcome-view-disclaimer {
45-
position: absolute;
46-
left: 0;
47-
right: 0;
48-
bottom: 0;
49-
margin: 0;
50-
padding: 0 8px;
51-
max-width: none;
52-
text-align: center;
53-
}
5448
}
5549
}
5650

5751
.new-welcome-view & > .chat-welcome-view-input-part {
5852
max-width: 650px;
59-
margin-bottom: 48px;
53+
margin-bottom: 8px; /* Reduced margin to make room for prompts below */
6054
}
6155
}
6256

@@ -73,6 +67,7 @@ div.chat-welcome-view {
7367
display: flex;
7468
flex-direction: column;
7569
align-items: center;
70+
padding: 12px;
7671

7772
& > .chat-welcome-view-icon {
7873
min-height: 48px;
@@ -177,78 +172,100 @@ div.chat-welcome-view {
177172
}
178173
}
179174

180-
/* Dedicated disclaimer container appended at root in TS */
181-
.interactive-session .chat-welcome-view-container.has-chat-history & > .chat-welcome-view-disclaimer {
175+
& > .chat-welcome-view-disclaimer {
176+
color: var(--vscode-input-placeholderForeground);
182177
text-align: center;
178+
margin: -16px auto;
183179
max-width: 400px;
184-
color: var(--vscode-input-placeholderForeground);
185-
margin: 16px auto;
186180
padding: 0 12px;
187-
padding-bottom: min(24px, max(0px, calc(24px - 1000 * (100% - 213px))));
188-
a {
189-
color: var(--vscode-textLink-foreground);
190-
}
181+
a { color: var(--vscode-textLink-foreground); }
191182
}
183+
}
192184

193-
.interactive-session .chat-welcome-view-container:not(.has-chat-history) & > .chat-welcome-view-disclaimer {
194-
color: var(--vscode-input-placeholderForeground);
195-
text-align: center;
196-
margin: -16px auto;
197-
max-width: 400px;
198-
a {
199-
color: var(--vscode-textLink-foreground);
200-
}
185+
/* Suggested prompts section - positioned at bottom of welcome container */
186+
.chat-welcome-view-suggested-prompts {
187+
position: absolute;
188+
bottom: 0;
189+
left: 0;
190+
right: 0;
191+
display: flex;
192+
flex-wrap: wrap;
193+
justify-content: flex-start;
194+
row-gap: 8px;
195+
padding: 32px 12px 12px 12px; /* Extra top padding for title */
196+
197+
.chat-welcome-view-suggested-prompts-title {
198+
position: absolute;
199+
top: 8px;
200+
left: 16px;
201+
font-size: 11px;
202+
font-weight: normal;
203+
text-transform: uppercase;
204+
letter-spacing: 0.5px;
205+
color: var(--vscode-descriptionForeground);
206+
margin: 0;
207+
text-align: left;
201208
}
202209

203-
& > .chat-welcome-view-suggested-prompts {
210+
> .chat-welcome-view-suggested-prompt {
204211
display: flex;
205-
flex-wrap: wrap;
206-
justify-content: center;
207-
row-gap: 8px;
208-
margin-top: 4px;
209-
210-
> .chat-welcome-view-suggested-prompt {
211-
display: flex;
212-
align-items: center;
213-
gap: 6px;
214-
height: 24px;
215-
padding: 0 10px;
216-
border-radius: 4px;
217-
background-color: var(--vscode-editorWidget-background);
218-
cursor: pointer;
219-
border: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent));
220-
max-width: 260px;
221-
width: fit-content;
222-
margin: 0 4px;
223-
224-
& > .chat-welcome-view-suggested-prompt-title {
225-
font-size: 14px;
226-
font-weight: 600;
227-
color: var(--vscode-editorWidget-foreground);
228-
white-space: nowrap;
229-
}
230-
231-
& > .chat-welcome-view-suggested-prompt-description {
232-
font-size: 13px;
233-
color: var(--vscode-descriptionForeground);
234-
overflow: hidden;
235-
text-overflow: ellipsis;
236-
white-space: nowrap;
237-
flex: 1;
238-
min-width: 0;
239-
}
212+
align-items: center;
213+
gap: 6px;
214+
height: 24px;
215+
padding: 0 8px;
216+
border-radius: 4px;
217+
background-color: var(--vscode-editorWidget-background);
218+
cursor: pointer;
219+
border: 1px solid var(--vscode-chat-requestBorder, var(--vscode-input-background, transparent));
220+
max-width: 260px;
221+
width: fit-content;
222+
margin: 0 4px;
223+
224+
& > .chat-welcome-view-suggested-prompt-title {
225+
font-size: 14px;
226+
font-weight: 600;
227+
color: var(--vscode-editorWidget-foreground);
228+
white-space: nowrap;
240229
}
241230

242-
& > .chat-welcome-view-suggested-prompt:hover {
243-
background-color: var(--vscode-list-hoverBackground);
244-
border-color: var(--vscode-focusBorder);
231+
& > .chat-welcome-view-suggested-prompt-description {
232+
font-size: 13px;
233+
color: var(--vscode-descriptionForeground);
234+
overflow: hidden;
235+
text-overflow: ellipsis;
236+
white-space: nowrap;
237+
flex: 1;
238+
min-width: 0;
245239
}
246240
}
241+
242+
> .chat-welcome-view-suggested-prompt:hover {
243+
background-color: var(--vscode-list-hoverBackground);
244+
border-color: var(--vscode-focusBorder);
245+
}
247246
}
248247

248+
/* Fresh login view - move prompts below input box instead of at bottom */
249+
.new-welcome-view .chat-welcome-view-suggested-prompts {
250+
position: relative;
251+
bottom: auto;
252+
left: auto;
253+
right: auto;
254+
margin-top: 8px;
255+
margin-bottom: 48px;
256+
justify-content: center;
257+
padding: 0 12px;
258+
}
259+
260+
/* Hide the title for fresh login view */
261+
.new-welcome-view .chat-welcome-view-suggested-prompts .chat-welcome-view-suggested-prompts-title {
262+
display: none;
263+
}
264+
265+
249266
.chat-welcome-history-root {
250267
width: 100%;
251-
padding: 0px 8px 0 8px;
268+
padding: 8px;
252269

253270
&.chat-welcome-history-hidden {
254271
display: none;
@@ -285,7 +302,7 @@ div.chat-welcome-view {
285302

286303

287304
.chat-welcome-history {
288-
margin: 0 0 12px;
305+
margin: 0 8px 8px 8px;
289306
width: 100%;
290307
}
291308

@@ -295,7 +312,7 @@ div.chat-welcome-view {
295312
border-radius: 4px;
296313
overflow: hidden;
297314
box-sizing: border-box;
298-
padding: 0 14px 0 0;
315+
padding: 0 16px 0 0;
299316
}
300317

301318
.chat-welcome-history-item {

‎src/vs/workbench/contrib/chat/browser/viewsWelcome/chatViewWelcomeController.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,9 @@ export class ChatViewWelcomePart extends Disposable {
191191
// Render suggested prompts for both new user and regular modes
192192
if (content.suggestedPrompts && content.suggestedPrompts.length) {
193193
const suggestedPromptsContainer = dom.append(this.element, $('.chat-welcome-view-suggested-prompts'));
194+
const titleElement = dom.append(suggestedPromptsContainer, $('.chat-welcome-view-suggested-prompts-title'));
195+
titleElement.textContent = localize('chatWidget.suggestedActions', 'Suggested Actions');
196+
194197
for (const prompt of content.suggestedPrompts) {
195198
const promptElement = dom.append(suggestedPromptsContainer, $('.chat-welcome-view-suggested-prompt'));
196199
// Make the prompt element keyboard accessible

0 commit comments

Comments
 (0)