Skip to content

Commit 83cfb62

Browse files
author
Katie George
committed
chore: Update test page
1 parent 14d67c2 commit 83cfb62

File tree

1 file changed

+100
-56
lines changed

1 file changed

+100
-56
lines changed

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

Lines changed: 100 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3+
import { useState } from "react";
4+
5+
import Button from "@cloudscape-design/components/button";
36
import Container from "@cloudscape-design/components/container";
47
import Header from "@cloudscape-design/components/header";
58
import PromptInput from "@cloudscape-design/components/prompt-input";
@@ -12,42 +15,50 @@ import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "../chat-bubble/util
1215
import { ScreenshotArea } from "../screenshot-area";
1316

1417
export default function SupportPromptPage() {
18+
const [text, setText] = useState("");
19+
const [text2, setText2] = useState("");
20+
const [sentText, setSentText] = useState("");
21+
22+
const items = [
23+
{
24+
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.",
25+
id: "image",
26+
},
27+
{
28+
text: "Help me brainstorm for an upcoming sign-off.",
29+
id: "brainstorm",
30+
},
31+
{
32+
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.",
33+
id: "summarize",
34+
},
35+
];
36+
37+
const items2 = [
38+
{
39+
text: "Create a really detailed and powerful image.",
40+
id: "image",
41+
},
42+
{
43+
text: "Help me brainstorm for an upcoming sign-off.",
44+
id: "brainstorm",
45+
},
46+
{
47+
text: "Summarize this long and complex PDF for me.",
48+
id: "summarize",
49+
},
50+
];
51+
1552
return (
1653
<ScreenshotArea>
1754
<main style={{ maxWidth: "800px" }}>
1855
<TestBed>
1956
<SpaceBetween size="xl">
20-
<Container header={<Header>Image generator</Header>}>
21-
<SpaceBetween direction="vertical" size="xxl">
22-
<div style={{ height: "100px" }} />
23-
24-
<SpaceBetween direction="vertical" size="m">
25-
<SupportPromptGroup
26-
alignment="horizontal"
27-
ariaLabel="Horizontal support prompt group"
28-
onItemClick={({ detail }) => console.log(detail)}
29-
items={[
30-
{
31-
text: "Create a really detailed and powerful image.",
32-
id: "image",
33-
},
34-
{
35-
text: "Help me brainstorm for an upcoming sign-off.",
36-
id: "brainstorm",
37-
},
38-
{
39-
text: "Summarize this long and complex PDF for me.",
40-
id: "summarize",
41-
},
42-
]}
43-
/>
44-
45-
<PromptInput placeholder="Write a prompt" value="" actionButtonIconName="send" />
46-
</SpaceBetween>
47-
</SpaceBetween>
48-
</Container>
49-
50-
<Container header={<Header>Image generator</Header>}>
57+
<Container
58+
header={
59+
<Header actions={<Button onClick={() => setText("")}>Reset</Button>}>Support prompt test: send</Header>
60+
}
61+
>
5162
<SpaceBetween direction="vertical" size="xxl">
5263
<div>
5364
<ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
@@ -58,39 +69,72 @@ export default function SupportPromptPage() {
5869
Amazon S3 provides a simple web service interface that you can use to store and retrieve any
5970
amount of data, at any time, from anywhere.
6071
</ChatBubble>
61-
<div style={{ marginInlineStart: "36px" }}>
62-
<SupportPromptGroup
63-
ariaLabel="Horizontal support prompt group"
64-
alignment="vertical"
65-
onItemClick={({ detail }) => console.log(detail)}
66-
items={[
67-
{
68-
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.",
69-
id: "image",
70-
},
71-
{
72-
text: "Help me brainstorm for an upcoming sign-off.",
73-
id: "brainstorm",
74-
},
75-
{
76-
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.",
77-
id: "summarize",
78-
},
79-
{
80-
text: "What questions remain unanswered after reading the document(s)? The response shall consider all current or past uploaded documents.",
81-
id: "image",
82-
},
83-
]}
84-
/>
85-
</div>
72+
{text === "" && (
73+
<div style={{ marginInlineStart: "36px" }}>
74+
<SupportPromptGroup
75+
ariaLabel="Horizontal support prompt group"
76+
alignment="vertical"
77+
onItemClick={({ detail }) => {
78+
const activeItem = items.find((item) => item.id === detail.id);
79+
setText(activeItem?.text || "");
80+
console.log(detail);
81+
}}
82+
items={items}
83+
/>
84+
</div>
85+
)}
8686
</SpaceBetween>
87+
{text !== "" && (
88+
<ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
89+
{text}
90+
</ChatBubble>
91+
)}
8792
</div>
8893

8994
<SpaceBetween direction="vertical" size="m">
9095
<PromptInput placeholder="Write a prompt" value="" actionButtonIconName="send" />
9196
</SpaceBetween>
9297
</SpaceBetween>
9398
</Container>
99+
<Container
100+
header={
101+
<Header actions={<Button onClick={() => setSentText("")}>Reset</Button>}>
102+
Support prompt test: draft
103+
</Header>
104+
}
105+
>
106+
<SpaceBetween direction="vertical" size="m">
107+
<div style={{ height: "100px" }} />
108+
{sentText !== "" && (
109+
<ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
110+
{sentText}
111+
</ChatBubble>
112+
)}
113+
<SpaceBetween direction="vertical" size="m">
114+
{sentText === "" && (
115+
<SupportPromptGroup
116+
alignment="horizontal"
117+
ariaLabel="Horizontal support prompt group"
118+
onItemClick={({ detail }) => {
119+
const activeItem = items2.find((item) => item.id === detail.id);
120+
setText2(activeItem?.text || "");
121+
}}
122+
items={items2}
123+
/>
124+
)}
125+
126+
<PromptInput
127+
placeholder="Write a prompt"
128+
value={text2}
129+
actionButtonIconName="send"
130+
onAction={() => {
131+
setSentText(text2);
132+
setText2("");
133+
}}
134+
/>
135+
</SpaceBetween>
136+
</SpaceBetween>
137+
</Container>
94138
</SpaceBetween>
95139
</TestBed>
96140
</main>

0 commit comments

Comments
 (0)