fix: Small page fixes

Author: Katie George

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

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useState } from "react";
+import { createRef, useState } from "react";
 
 import Button from "@cloudscape-design/components/button";
 import Container from "@cloudscape-design/components/container";
@@ -14,10 +14,13 @@ 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 = [
     {
@@ -44,14 +47,14 @@ export default function SupportPromptPage() {
       id: "brainstorm",
     },
     {
-      text: "Summarize this long and complex PDF for me.",
+      text: "Summarize this long PDF for me.",
       id: "summarize",
     },
   ];
 
   return (
     <ScreenshotArea>
-      <main style={{ maxWidth: "800px" }}>
+      <main className={styles.container}>
         <TestBed>
           <SpaceBetween size="xl">
             <Container
@@ -70,9 +73,9 @@ export default function SupportPromptPage() {
                       amount of data, at any time, from anywhere.
                     </ChatBubble>
                     {text === "" && (
-                      <div style={{ marginInlineStart: "36px" }}>
+                      <div className={styles["support-prompt-container"]}>
                         <SupportPromptGroup
-                          ariaLabel="Horizontal support prompt group"
+                          ariaLabel="Test support prompt group 1"
                           alignment="vertical"
                           onItemClick={({ detail }) => {
                             const activeItem = items.find((item) => item.id === detail.id);
@@ -104,7 +107,7 @@ export default function SupportPromptPage() {
               }
             >
               <SpaceBetween direction="vertical" size="m">
-                <div style={{ height: "100px" }} />
+                <div className={styles.placeholder} />
                 {sentText !== "" && (
                   <ChatBubble type="outgoing" avatar={<ChatBubbleAvatarUser />} ariaLabel="User at 4:23:20pm">
                     {sentText}
@@ -114,16 +117,18 @@ export default function SupportPromptPage() {
                   {sentText === "" && (
                     <SupportPromptGroup
                       alignment="horizontal"
-                      ariaLabel="Horizontal support prompt group"
+                      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"

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

@@ -52,7 +52,7 @@ export default function SupportPromptPage() {
             ]}
           />
 
-          <h2>group with really long text</h2>
+          <h2>Horizontal group with really long text</h2>
           <SupportPromptGroup
             ariaLabel="Horizontal support prompt group"
             alignment="horizontal"
@@ -72,7 +72,7 @@ export default function SupportPromptPage() {
               },
               {
                 text: "What  questions remain unanswered after reading the document(s)? The response shall consider all current or past uploaded documents.",
-                id: "image",
+                id: "image-2",
               },
             ]}
           />
@@ -96,7 +96,7 @@ export default function SupportPromptPage() {
               },
               {
                 text: "What  questions remain unanswered after reading the document(s)? The response shall consider all current or past uploaded documents.",
-                id: "image",
+                id: "image-2",
               },
             ]}
           />

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;
+}

src/support-prompt-group/internal.tsx

@@ -125,18 +125,10 @@ export const InternalSupportPromptGroup = forwardRef(
       handleKey(event as any, {
         onHome: () => focusElement(focusables[0]),
         onEnd: () => focusElement(focusables[focusables.length - 1]),
-        onInlineStart: () =>
-          alignment === "horizontal" &&
-          focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
-        onInlineEnd: () =>
-          alignment === "horizontal" &&
-          focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
-        onBlockStart: () =>
-          alignment === "vertical" &&
-          focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
-        onBlockEnd: () =>
-          alignment === "vertical" &&
-          focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
+        onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
+        onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
+        onBlockStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
+        onBlockEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
       });
     }
 

src/support-prompt-group/styles.scss

@@ -11,6 +11,7 @@
   @include shared.styles-reset;
 
   display: flex;
+  flex-wrap: wrap;
   gap: awsui.$space-scaled-xs;
 
   &.vertical {
@@ -56,7 +57,7 @@
     outline: none;
 
     @include shared.when-visible {
-      @include shared.focus-highlight(4px, 4px);
+      @include shared.focus-highlight(6px, 6px);
     }
   }
 }