feat: Add SupportPromptGroup

package.json

@@ -42,6 +42,7 @@
     "./avatar": "./avatar/index.js",
     "./chat-bubble": "./chat-bubble/index.js",
     "./loading-bar": "./loading-bar/index.js",
+    "./support-prompt-group": "./support-prompt-group/index.js",
     "./test-utils/dom": "./test-utils/dom/index.js",
     "./test-utils/selectors": "./test-utils/selectors/index.js",
     "./internal/api-docs/*.js": "./internal/api-docs/*.js"
@@ -120,7 +121,7 @@
     ],
     "*.{scss,css}": [
       "stylelint --fix"
-    ],    
+    ],
     "package-lock.json": [
       "./scripts/prepare-package-lock.js"
     ]

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

@@ -0,0 +1,147 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createRef, useState } from "react";
+
+import Button from "@cloudscape-design/components/button";
+import Container from "@cloudscape-design/components/container";
+import Header from "@cloudscape-design/components/header";
+import PromptInput from "@cloudscape-design/components/prompt-input";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import { ChatBubble, SupportPromptGroup } from "../../lib/components";
+import { TestBed } from "../app/test-bed";
+import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "../chat-bubble/util-components";
+import { ScreenshotArea } from "../screenshot-area";
+
+import styles from "./styles.module.scss";
+
+export default function SupportPromptPage() {
+  const [text, setText] = useState("");
+  const [text2, setText2] = useState("");
+  const [sentText, setSentText] = useState("");
+  const ref = createRef<HTMLTextAreaElement>();
+
+  const items = [
+    {
+      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.",
+      id: "image",
+    },
+    {
+      text: "Help me brainstorm for an upcoming sign-off.",
+      id: "brainstorm",
+    },
+    {
+      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.",
+      id: "summarize",
+    },
+  ];
+
+  const items2 = [
+    {
+      text: "Create a really detailed and powerful image.",
+      id: "image",
+    },
+    {
+      text: "Help me brainstorm for an upcoming sign-off.",
+      id: "brainstorm",
+    },
+    {
+      text: "Summarize this long PDF for me.",
+      id: "summarize",
+    },
+  ];
+
+  return (
+    <ScreenshotArea>
+      <main className={styles.container}>
+        <TestBed>
+          <SpaceBetween size="xl">
+            <Container
+              header={
+                <Header actions={<Button onClick={() => setText("")}>Reset</Button>}>Support prompt test: send</Header>
+              }
+            >
+              <SpaceBetween direction="vertical" size="xxl">
+                <div>
+                  <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
+                    What can I do with Amazon S3?
+                  </ChatBubble>
+                  <SpaceBetween direction="vertical" size="xs">
+                    <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" ariaLabel="Gen AI at at 4:23:23pm">
+                      Amazon S3 provides a simple web service interface that you can use to store and retrieve any
+                      amount of data, at any time, from anywhere.
+                    </ChatBubble>
+                    {text === "" && (
+                      <div className={styles["support-prompt-container"]}>
+                        <SupportPromptGroup
+                          ariaLabel="Test support prompt group 1"
+                          alignment="vertical"
+                          onItemClick={({ detail }) => {
+                            const activeItem = items.find((item) => item.id === detail.id);
+                            setText(activeItem?.text || "");
+                            console.log(detail);
+                          }}
+                          items={items}
+                        />
+                      </div>
+                    )}
+                  </SpaceBetween>
+                  {text !== "" && (
+                    <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
+                      {text}
+                    </ChatBubble>
+                  )}
+                </div>
+
+                <SpaceBetween direction="vertical" size="m">
+                  <PromptInput placeholder="Write a prompt" value="" actionButtonIconName="send" />
+                </SpaceBetween>
+              </SpaceBetween>
+            </Container>
+            <Container
+              header={
+                <Header actions={<Button onClick={() => setSentText("")}>Reset</Button>}>
+                  Support prompt test: draft
+                </Header>
+              }
+            >
+              <SpaceBetween direction="vertical" size="m">
+                <div className={styles.placeholder} />
+                {sentText !== "" && (
+                  <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
+                    {sentText}
+                  </ChatBubble>
+                )}
+                <SpaceBetween direction="vertical" size="m">
+                  {sentText === "" && (
+                    <SupportPromptGroup
+                      alignment="horizontal"
+                      ariaLabel="Test support prompt group 2"
+                      onItemClick={({ detail }) => {
+                        const activeItem = items2.find((item) => item.id === detail.id);
+                        setText2(activeItem?.text || "");
+                        ref.current?.focus();
+                      }}
+                      items={items2}
+                    />
+                  )}
+
+                  <PromptInput
+                    ref={ref}
+                    placeholder="Write a prompt"
+                    value={text2}
+                    actionButtonIconName="send"
+                    onAction={() => {
+                      setSentText(text2);
+                      setText2("");
+                    }}
+                  />
+                </SpaceBetween>
+              </SpaceBetween>
+            </Container>
+          </SpaceBetween>
+        </TestBed>
+      </main>
+    </ScreenshotArea>
+  );
+}

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

@@ -0,0 +1,107 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { SupportPromptGroup } from "../../lib/components";
+import { TestBed } from "../app/test-bed";
+import { ScreenshotArea } from "../screenshot-area";
+
+export default function SupportPromptPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Support prompt</h1>
+      <main>
+        <TestBed>
+          <h2>horizontal group</h2>
+          <SupportPromptGroup
+            ariaLabel="Horizontal support prompt group"
+            alignment="horizontal"
+            onItemClick={({ detail }) => console.log(detail)}
+            items={[
+              {
+                text: "Create image",
+                id: "image",
+              },
+              {
+                text: "Brainstorm",
+                id: "brainstorm",
+              },
+              {
+                text: "Summarize text",
+                id: "summarize",
+              },
+            ]}
+          />
+
+          <h2>vertical group</h2>
+          <SupportPromptGroup
+            ariaLabel="Vertical support prompt group"
+            onItemClick={({ detail }) => console.log(detail)}
+            items={[
+              {
+                text: "Create image",
+                id: "image-2",
+              },
+              {
+                text: "Brainstorm",
+                id: "brainstorm-2",
+              },
+              {
+                text: "Summarize text",
+                id: "summarize-2",
+              },
+            ]}
+          />
+
+          <h2>Horizontal group with really long text</h2>
+          <SupportPromptGroup
+            ariaLabel="Horizontal support prompt group"
+            alignment="horizontal"
+            onItemClick={({ detail }) => console.log(detail)}
+            items={[
+              {
+                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.",
+                id: "image",
+              },
+              {
+                text: "Help me brainstorm for an upcoming sign-off.",
+                id: "brainstorm",
+              },
+              {
+                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.",
+                id: "summarize",
+              },
+              {
+                text: "What  questions remain unanswered after reading the document(s)? The response shall consider all current or past uploaded documents.",
+                id: "image-2",
+              },
+            ]}
+          />
+
+          <h2>vertical group with really long text</h2>
+          <SupportPromptGroup
+            ariaLabel="Horizontal support prompt group"
+            onItemClick={({ detail }) => console.log(detail)}
+            items={[
+              {
+                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.",
+                id: "image",
+              },
+              {
+                text: "Help me brainstorm for an upcoming sign-off.",
+                id: "brainstorm",
+              },
+              {
+                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.",
+                id: "summarize",
+              },
+              {
+                text: "What  questions remain unanswered after reading the document(s)? The response shall consider all current or past uploaded documents.",
+                id: "image-2",
+              },
+            ]}
+          />
+        </TestBed>
+      </main>
+    </ScreenshotArea>
+  );
+}

pages/support-prompt-group/styles.module.scss

@@ -0,0 +1,16 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.support-prompt-container {
+  margin-inline-start: 36px;
+}
+
+.container {
+  max-width: 1000px;
+}
+
+.placeholder {
+  block-size: 150px;
+}

scripts/pluralize.js

@@ -4,6 +4,7 @@ const pluralizationMap = {
   Avatar: "Avatars",
   ChatBubble: "ChatBubbles",
   LoadingBar: "LoadingBars",
+  SupportPromptGroup: "SupportPromptGroups",
 };
 
 function pluralizeComponentName(componentName) {

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

@@ -183,3 +183,100 @@ with rounded corners.",
   "releaseStatus": "stable",
 }
 `;
+
+exports[`definition for support-prompt-group matches the snapshot > support-prompt-group 1`] = `
+{
+  "events": [
+    {
+      "cancelable": false,
+      "description": "Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.",
+      "detailInlineType": {
+        "name": "SupportPromptGroupProps.ItemClickDetail",
+        "properties": [
+          {
+            "name": "altKey",
+            "optional": false,
+            "type": "boolean",
+          },
+          {
+            "name": "button",
+            "optional": false,
+            "type": "number",
+          },
+          {
+            "name": "ctrlKey",
+            "optional": false,
+            "type": "boolean",
+          },
+          {
+            "name": "id",
+            "optional": false,
+            "type": "string",
+          },
+          {
+            "name": "metaKey",
+            "optional": false,
+            "type": "boolean",
+          },
+          {
+            "name": "shiftKey",
+            "optional": false,
+            "type": "boolean",
+          },
+        ],
+        "type": "object",
+      },
+      "detailType": "SupportPromptGroupProps.ItemClickDetail",
+      "name": "onItemClick",
+    },
+  ],
+  "functions": [
+    {
+      "description": "Focuses support prompt group item by ID.",
+      "name": "focus",
+      "parameters": [
+        {
+          "name": "itemId",
+          "type": "string",
+        },
+      ],
+      "returnType": "void",
+    },
+  ],
+  "name": "SupportPromptGroup",
+  "properties": [
+    {
+      "description": "Alignment of the prompts. Defaults to \`vertical\`.",
+      "inlineType": {
+        "name": "SupportPromptGroupProps.Alignment",
+        "type": "union",
+        "values": [
+          "vertical",
+          "horizontal",
+        ],
+      },
+      "name": "alignment",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Adds an aria label to the support prompt group.
+Use this to provide a unique accessible name for each support prompt group on the page.",
+      "name": "ariaLabel",
+      "optional": false,
+      "type": "string",
+    },
+    {
+      "description": "An array of objects representing support prompts.
+Each item has the following properties:
+  - text: The text of the support prompt.
+  - id: The ID of the support prompt.",
+      "name": "items",
+      "optional": false,
+      "type": "ReadonlyArray<SupportPromptGroupProps.Item>",
+    },
+  ],
+  "regions": [],
+  "releaseStatus": "stable",
+}
+`;