Skip to content

Commit 42baccd

Browse files
bloveclaude
blove
and
claude
authored
feat(demos): clearer welcome-suggestion copy + palette validate-on-read (#705)
* docs: plan for demo welcome-suggestion clarity + palette validation Co-Authored-By: Claude Fable 5 <[email protected]> * feat(chat): optional description on ChatSelectOption (multiline) + chat-welcome-suggestion (tooltip) Co-Authored-By: Claude Fable 5 <[email protected]> * feat(examples): clearer welcome-suggestion titles + descriptions (multiline dropdown) Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * feat(cockpit): clearer welcome-suggestion titles + descriptions (chip tooltips) Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * docs(chat): regenerate api-docs for ChatSelectOption.description + chip tooltip --------- Co-authored-by: Claude Fable 5 <[email protected]>
1 parent d62cc35 commit 42baccd

28 files changed

Lines changed: 629 additions & 51 deletions

File tree

‎apps/website/content/docs/chat/api/api-docs.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4721,6 +4721,12 @@
47214721
"params": [],
47224722
"examples": [],
47234723
"properties": [
4724+
{
4725+
"name": "description",
4726+
"type": "InputSignal<string | undefined>",
4727+
"description": "Optional short description, surfaced as a hover/focus tooltip on the chip.",
4728+
"optional": false
4729+
},
47244730
{
47254731
"name": "label",
47264732
"type": "InputSignal<string>",
@@ -5939,6 +5945,12 @@
59395945
"kind": "interface",
59405946
"description": "",
59415947
"properties": [
5948+
{
5949+
"name": "description",
5950+
"type": "string",
5951+
"description": "",
5952+
"optional": true
5953+
},
59425954
{
59435955
"name": "disabled",
59445956
"type": "boolean",

‎cockpit/ag-ui/a2ui/angular/src/app/a2ui.component.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,16 @@ import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
55
import { injectAgent } from '@threadplane/ag-ui';
66

77
const WELCOME_SUGGESTIONS = [
8-
{ label: 'LAX → JFK', value: 'I want to fly LAX to JFK' },
9-
{ label: 'SFO → SEA', value: 'I want to fly SFO to SEA' },
8+
{
9+
label: 'Book LAX → JFK',
10+
value: 'I want to fly LAX to JFK',
11+
description: 'Agent emits an A2UI form spec; watch the booking form render in-chat.',
12+
},
13+
{
14+
label: 'Book SFO → SEA',
15+
value: 'I want to fly SFO to SEA',
16+
description: 'Same A2UI pattern on a different route — try both to compare.',
17+
},
1018
] as const;
1119

1220
@Component({
@@ -18,7 +26,7 @@ const WELCOME_SUGGESTIONS = [
1826
<chat main [agent]="agent" [views]="catalog" class="flex-1 min-w-0">
1927
<div chatWelcomeSuggestions>
2028
@for (s of suggestions; track s.value) {
21-
<chat-welcome-suggestion [label]="s.label" [value]="s.value" (selected)="send($event)" />
29+
<chat-welcome-suggestion [label]="s.label" [value]="s.value" [description]="s.description" (selected)="send($event)" />
2230
}
2331
</div>
2432
</chat>

‎cockpit/ag-ui/interrupts/angular/src/app/interrupts.component.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@ import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
66
import { CurrencyPipe } from '@angular/common';
77

88
const WELCOME_SUGGESTIONS = [
9-
{ label: 'Refund a duplicate charge', value: 'Refund $47.50 to customer cus_a8x2k — they were charged twice for the same order.' },
10-
{ label: 'Refund a chargeback', value: 'Refund $129.00 to customer cus_z19fp who opened a chargeback for unrecognized activity.' },
9+
// label asserted by e2e (interrupts.spec.ts page.getByText) — do not change.
10+
{
11+
label: 'Refund a duplicate charge',
12+
value: 'Refund $47.50 to customer cus_a8x2k — they were charged twice for the same order.',
13+
description: 'Graph pauses at request_approval; approve or edit the amount in the modal.',
14+
},
15+
{
16+
label: 'Refund a chargeback',
17+
value: 'Refund $129.00 to customer cus_z19fp who opened a chargeback for unrecognized activity.',
18+
description: 'Chargeback path — same interrupt pattern with a different reason string.',
19+
},
1120
] as const;
1221

1322
/**
@@ -45,6 +54,7 @@ const WELCOME_SUGGESTIONS = [
4554
<chat-welcome-suggestion
4655
[label]="s.label"
4756
[value]="s.value"
57+
[description]="s.description"
4858
(selected)="send($event)"
4959
/>
5060
}

‎cockpit/ag-ui/json-render/angular/src/app/json-render.component.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,16 @@ const dashboardViews = views({
2121
});
2222

2323
const WELCOME_SUGGESTIONS = [
24-
{ label: 'Airline operations dashboard', value: 'Show me a dashboard of airline operations.' },
25-
{ label: 'Filter to cancelled flights', value: 'Filter to only the cancelled flights.' },
24+
{
25+
label: 'Airline operations dashboard',
26+
value: 'Show me a dashboard of airline operations.',
27+
description: 'Agent emits a render spec; charts and KPI cards appear inline in the chat.',
28+
},
29+
{
30+
label: 'Filter to cancelled flights',
31+
value: 'Filter to only the cancelled flights.',
32+
description: 'Follow-up that updates the dashboard state — shows GenUI mutation in action.',
33+
},
2634
] as const;
2735

2836
@Component({
@@ -34,7 +42,7 @@ const WELCOME_SUGGESTIONS = [
3442
<chat main [agent]="agent" [views]="dashboardViews" [store]="dashStore" class="flex-1 min-w-0">
3543
<div chatWelcomeSuggestions>
3644
@for (s of suggestions; track s.value) {
37-
<chat-welcome-suggestion [label]="s.label" [value]="s.value" (selected)="send($event)" />
45+
<chat-welcome-suggestion [label]="s.label" [value]="s.value" [description]="s.description" (selected)="send($event)" />
3846
}
3947
</div>
4048
</chat>

‎cockpit/chat/a2ui/angular/src/app/a2ui.component.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,16 @@ import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
55
import { injectAgent } from '@threadplane/langgraph';
66

77
const WELCOME_SUGGESTIONS = [
8-
{ label: 'LAX → JFK', value: 'I want to fly LAX to JFK' },
9-
{ label: 'SFO → SEA', value: 'I want to fly SFO to SEA' },
8+
{
9+
label: 'Book LAX → JFK',
10+
value: 'I want to fly LAX to JFK',
11+
description: 'Agent emits an A2UI form spec; watch the booking form render in-chat.',
12+
},
13+
{
14+
label: 'Book SFO → SEA',
15+
value: 'I want to fly SFO to SEA',
16+
description: 'Same A2UI pattern on a different route — try both to compare.',
17+
},
1018
] as const;
1119

1220
@Component({
@@ -21,6 +29,7 @@ const WELCOME_SUGGESTIONS = [
2129
<chat-welcome-suggestion
2230
[label]="s.label"
2331
[value]="s.value"
32+
[description]="s.description"
2433
(selected)="send($event)"
2534
/>
2635
}

‎cockpit/chat/generative-ui/angular/src/app/generative-ui.component.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,16 @@ const dashboardViews = views({
2222
});
2323

2424
const WELCOME_SUGGESTIONS = [
25-
{ label: 'Airline operations dashboard', value: 'Show me a dashboard of airline operations.' },
26-
{ label: 'Filter to cancelled flights', value: 'Filter to only the cancelled flights.' },
25+
{
26+
label: 'Airline operations dashboard',
27+
value: 'Show me a dashboard of airline operations.',
28+
description: 'Agent emits a render spec; charts and KPI cards appear inline in the chat.',
29+
},
30+
{
31+
label: 'Filter to cancelled flights',
32+
value: 'Filter to only the cancelled flights.',
33+
description: 'Follow-up that updates the dashboard state — shows GenUI mutation in action.',
34+
},
2735
] as const;
2836

2937
@Component({
@@ -38,6 +46,7 @@ const WELCOME_SUGGESTIONS = [
3846
<chat-welcome-suggestion
3947
[label]="s.label"
4048
[value]="s.value"
49+
[description]="s.description"
4150
(selected)="send($event)"
4251
/>
4352
}

‎cockpit/chat/interrupts/angular/src/app/interrupts.component.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,17 @@ import { injectAgent } from '@threadplane/langgraph';
1313
const SUGGESTIONS = [
1414
// values match cockpit/chat/interrupts/angular/e2e/c-interrupts.spec.ts.
1515
// Confirm flow: book + Accept → "Booked …"
16-
{ label: 'Book UA123 (confirm)', value: 'Book me on UA123.' },
16+
{
17+
label: 'Book a flight (you confirm)',
18+
value: 'Book me on UA123.',
19+
description: 'Agent pauses for approval; click Accept in the sidebar to complete the booking.',
20+
},
1721
// Cancel flow: book + Ignore → "Booking cancelled."
18-
{ label: 'Book AA404 (cancel)', value: 'Book me on AA404.' },
22+
{
23+
label: 'Book a flight (you cancel)',
24+
value: 'Book me on AA404.',
25+
description: 'Same interrupt flow; click Ignore to see the cancellation path.',
26+
},
1927
] as const;
2028

2129
/**
@@ -49,6 +57,7 @@ const SUGGESTIONS = [
4957
<chat-welcome-suggestion
5058
[label]="s.label"
5159
[value]="s.value"
60+
[description]="s.description"
5261
(selected)="send($event)"
5362
/>
5463
}

‎cockpit/chat/subagents/angular/src/app/subagents.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ import { injectAgent } from '@threadplane/langgraph';
1111

1212
const SUGGESTIONS = [
1313
// value matches cockpit/chat/subagents/angular/e2e/c-subagents.spec.ts PROMPT.
14-
{ label: 'Plan a trip', value: 'Plan a trip from LAX to JFK' },
14+
{
15+
label: 'Plan a trip from LAX to JFK',
16+
value: 'Plan a trip from LAX to JFK',
17+
description: 'Orchestrator fans out to research, analysis, and summary subagents in parallel.',
18+
},
1519
] as const;
1620

1721
/**
@@ -39,6 +43,7 @@ const SUGGESTIONS = [
3943
<chat-welcome-suggestion
4044
[label]="s.label"
4145
[value]="s.value"
46+
[description]="s.description"
4247
(selected)="send($event)"
4348
/>
4449
}

‎cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ import { injectAgent } from '@threadplane/langgraph';
1111

1212
const SUGGESTIONS = [
1313
// value matches cockpit/chat/tool-calls/angular/e2e/c-tool-calls.spec.ts PROMPT.
14-
{ label: 'Look up flight UA123', value: "What's the status of UA123?" },
14+
{
15+
label: 'Check a flight status',
16+
value: "What's the status of UA123?",
17+
description: 'Calls a lookup_flight tool; watch the tool-call card stream in the sidebar.',
18+
},
1519
] as const;
1620

1721
/**
@@ -38,6 +42,7 @@ const SUGGESTIONS = [
3842
<chat-welcome-suggestion
3943
[label]="s.label"
4044
[value]="s.value"
45+
[description]="s.description"
4146
(selected)="send($event)"
4247
/>
4348
}

‎cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,17 @@ import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
66
import { CurrencyPipe } from '@angular/common';
77

88
const WELCOME_SUGGESTIONS = [
9-
{ label: 'Refund a duplicate charge', value: 'Refund $47.50 to customer cus_a8x2k — they were charged twice for the same order.' },
10-
{ label: 'Refund a chargeback', value: 'Refund $129.00 to customer cus_z19fp who opened a chargeback for unrecognized activity.' },
9+
// label asserted by e2e (interrupts.spec.ts page.getByText) — do not change.
10+
{
11+
label: 'Refund a duplicate charge',
12+
value: 'Refund $47.50 to customer cus_a8x2k — they were charged twice for the same order.',
13+
description: 'Graph pauses at request_approval; approve or edit the amount in the modal.',
14+
},
15+
{
16+
label: 'Refund a chargeback',
17+
value: 'Refund $129.00 to customer cus_z19fp who opened a chargeback for unrecognized activity.',
18+
description: 'Chargeback path — same interrupt pattern with a different reason string.',
19+
},
1120
] as const;
1221

1322
/**
@@ -45,6 +54,7 @@ const WELCOME_SUGGESTIONS = [
4554
<chat-welcome-suggestion
4655
[label]="s.label"
4756
[value]="s.value"
57+
[description]="s.description"
4858
(selected)="send($event)"
4959
/>
5060
}

0 commit comments

Comments
 (0)