Skip to content

Commit 0a2f72a

Browse files
timogasdatimogasda
authored
feat: Add icons to support prompt group (#112)
* feat: Add icons to support prompt group * Update snapshot * Add icon to a larger prompt * Update tests * feat(support-prompt-group): Add iconVerticalAlignment prop Add iconVerticalAlignment prop to support prompt group items to control the vertical alignment of icons. The prop accepts 'center', 'start', or 'end' values, with 'start' as the default. This allows icons to align to the top, center, or bottom of multi-line text content, providing better visual control for different use cases. * refactor(support-prompt-group): Simplify icon alignment tests Consolidate multiple icon vertical alignment test cases into a single comprehensive test that checks all three alignment options (start, center, end) plus the default behavior. * remove unnecessary test * Simplified dev page
1 parent 8fdd3f3 commit 0a2f72a

File tree

8 files changed

+599
-29
lines changed

8 files changed

+599
-29
lines changed

‎pages/support-prompt-group/in-context.page.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Header from "@cloudscape-design/components/header";
88
import PromptInput from "@cloudscape-design/components/prompt-input";
99
import SpaceBetween from "@cloudscape-design/components/space-between";
1010

11-
import { ChatBubble, SupportPromptGroup } from "../../lib/components";
11+
import { ChatBubble, SupportPromptGroup, SupportPromptGroupProps } from "../../lib/components";
1212
import { Page } from "../app/templates";
1313
import { TestBed } from "../app/test-bed";
1414
import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "../chat-bubble/util-components";
@@ -21,7 +21,7 @@ export default function SupportPromptPage() {
2121
const [sentText, setSentText] = useState("");
2222
const ref = createRef<HTMLTextAreaElement>();
2323

24-
const items = [
24+
const items: Array<SupportPromptGroupProps.Item> = [
2525
{
2626
text: "Create a really detailed and powerful image. The image should be of a mountain scene with a blue lake and green hills, with a sunset in the background. In the lake, there should be 3 whales leaping out of the water.",
2727
id: "image",
@@ -36,18 +36,24 @@ export default function SupportPromptPage() {
3636
},
3737
];
3838

39-
const items2 = [
39+
const items2: Array<SupportPromptGroupProps.Item> = [
4040
{
4141
text: "Create a really detailed and powerful image.",
4242
id: "image",
43+
iconName: "edit",
44+
ariaLabel: "Create a really detailed and powerful image. (edit before submit)",
4345
},
4446
{
4547
text: "Help me brainstorm for an upcoming sign-off.",
4648
id: "brainstorm",
49+
iconName: "edit",
50+
ariaLabel: "Help me brainstorm for an upcoming sign-off. (edit before submit)",
4751
},
4852
{
4953
text: "Summarize this long PDF for me.",
5054
id: "summarize",
55+
iconName: "edit",
56+
ariaLabel: "Summarize this long PDF for me. (edit before submit)",
5157
},
5258
];
5359

‎pages/support-prompt-group/simple.page.tsx‎

Lines changed: 160 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { SupportPromptGroup } from "../../lib/components";
55
import { Page } from "../app/templates";
66
import { TestBed } from "../app/test-bed";
77

8+
const longPromptText =
9+
"Summarize this long and complex PDF for me. Include a paragraph containing 3-4 sentences that capture the main ideas and overall message of the documents, a list of 5 to 10 key points from the document, and up to 3 follow-up questions that arise from the content of the document.";
10+
811
export default function SupportPromptPage() {
912
return (
1013
<Page title="Support prompt">
@@ -66,7 +69,7 @@ export default function SupportPromptPage() {
6669
id: "brainstorm",
6770
},
6871
{
69-
text: "Summarize this long and complex PDF for me. Include a paragraph containing 3-4 sentences that capture the main ideas and overall message of the documents, a list of 5 to 10 key points from the document, and up to 3 follow-up questions that arise from the content of the document.",
72+
text: longPromptText,
7073
id: "summarize",
7174
},
7275
{
@@ -90,7 +93,7 @@ export default function SupportPromptPage() {
9093
id: "brainstorm",
9194
},
9295
{
93-
text: "Summarize this long and complex PDF for me. Include a paragraph containing 3-4 sentences that capture the main ideas and overall message of the documents, a list of 5 to 10 key points from the document, and up to 3 follow-up questions that arise from the content of the document.",
96+
text: longPromptText,
9497
id: "summarize",
9598
},
9699
{
@@ -99,6 +102,161 @@ export default function SupportPromptPage() {
99102
},
100103
]}
101104
/>
105+
106+
<h2>horizontal group with icons (left position)</h2>
107+
<SupportPromptGroup
108+
ariaLabel="Support prompts with icons"
109+
alignment="horizontal"
110+
onItemClick={({ detail }) => console.log(detail)}
111+
items={[
112+
{
113+
text: "Edit document",
114+
id: "edit-icon",
115+
iconName: "edit",
116+
},
117+
{
118+
text: "Generate with AI",
119+
id: "gen-ai-icon",
120+
iconName: "gen-ai",
121+
},
122+
{
123+
text: "Search content",
124+
id: "search-icon",
125+
iconName: "search",
126+
},
127+
]}
128+
/>
129+
130+
<h2>vertical group with icons (right position)</h2>
131+
<SupportPromptGroup
132+
ariaLabel="Support prompts with right-aligned icons"
133+
onItemClick={({ detail }) => console.log(detail)}
134+
items={[
135+
{
136+
text: "Settings",
137+
id: "settings-icon",
138+
iconName: "settings",
139+
iconPosition: "right",
140+
},
141+
{
142+
text: "Upload file",
143+
id: "upload-icon",
144+
iconName: "upload",
145+
iconPosition: "right",
146+
},
147+
{
148+
text: "Download results",
149+
id: "download-icon",
150+
iconName: "download",
151+
iconPosition: "right",
152+
},
153+
]}
154+
/>
155+
156+
<h2>mixed items (with and without icons)</h2>
157+
<SupportPromptGroup
158+
ariaLabel="Mixed support prompts"
159+
alignment="horizontal"
160+
onItemClick={({ detail }) => console.log(detail)}
161+
items={[
162+
{
163+
text: "Create image",
164+
id: "create-image",
165+
iconName: "gen-ai",
166+
ariaLabel: "Create image (using AI)",
167+
},
168+
{
169+
text: "Brainstorm ideas",
170+
id: "brainstorm-plain",
171+
},
172+
{
173+
text: "Edit content",
174+
id: "edit-content",
175+
iconName: "edit",
176+
iconPosition: "right",
177+
},
178+
{
179+
text: "Summarize text",
180+
id: "summarize-plain",
181+
},
182+
]}
183+
/>
184+
185+
<h2>custom SVG icons</h2>
186+
<SupportPromptGroup
187+
ariaLabel="Support prompts with custom SVG icons"
188+
alignment="horizontal"
189+
onItemClick={({ detail }) => console.log(detail)}
190+
items={[
191+
{
192+
text: "Custom action 1",
193+
id: "custom-1",
194+
iconSvg: (
195+
<svg viewBox="0 0 16 16" focusable="false">
196+
<circle cx="8" cy="8" r="6" fill="currentColor" />
197+
</svg>
198+
),
199+
},
200+
{
201+
text: "Custom action 2",
202+
id: "custom-2",
203+
iconSvg: (
204+
<svg viewBox="0 0 16 16" focusable="false">
205+
<rect x="4" y="4" width="8" height="8" fill="currentColor" />
206+
</svg>
207+
),
208+
iconPosition: "right",
209+
},
210+
]}
211+
/>
212+
213+
<h2>icon vertical alignments</h2>
214+
<SupportPromptGroup
215+
ariaLabel="Support prompts with different icon alignments"
216+
alignment="horizontal"
217+
onItemClick={({ detail }) => console.log(detail)}
218+
items={[
219+
{
220+
text: longPromptText,
221+
id: "align-start-left",
222+
iconName: "edit",
223+
iconVerticalAlignment: "start",
224+
},
225+
{
226+
text: longPromptText,
227+
id: "align-center-left",
228+
iconName: "gen-ai",
229+
iconVerticalAlignment: "center",
230+
},
231+
{
232+
text: longPromptText,
233+
id: "align-end-left",
234+
iconName: "search",
235+
iconVerticalAlignment: "end",
236+
},
237+
{
238+
text: longPromptText,
239+
id: "align-start-right",
240+
iconName: "search",
241+
iconPosition: "right",
242+
iconVerticalAlignment: "start",
243+
},
244+
{
245+
text: longPromptText,
246+
id: "align-center-right",
247+
iconName: "gen-ai",
248+
iconPosition: "right",
249+
iconVerticalAlignment: "center",
250+
},
251+
{
252+
text: longPromptText,
253+
id: "align-end-right",
254+
iconName: "edit",
255+
iconPosition: "right",
256+
iconVerticalAlignment: "end",
257+
},
258+
]}
259+
/>
102260
</TestBed>
103261
</main>
104262
</Page>

‎src/__tests__/__snapshots__/documenter.test.ts.snap‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,12 @@ Use this to provide a unique accessible name for each support prompt group on th
477477
"description": "An array of objects representing support prompts.
478478
Each item has the following properties:
479479
- text: The text of the support prompt.
480-
- id: The ID of the support prompt.",
480+
- id: The ID of the support prompt.
481+
- iconName (optional): The name of a built-in icon to display.
482+
- iconSvg (optional): A custom SVG icon to display. Takes precedence over iconName.
483+
- iconPosition (optional): Position of the icon relative to text. Can be "left" (default) or "right".
484+
- iconVerticalAlignment (optional): Vertical alignment of the icon. Can be "center", "start" (default), or "end".
485+
- ariaLabel (optional): Custom accessible label for the prompt.",
481486
"name": "items",
482487
"optional": false,
483488
"type": "ReadonlyArray<SupportPromptGroupProps.Item>",

0 commit comments

Comments
 (0)