feat: Add PromptInput component

package.json

@@ -43,6 +43,7 @@
     "./avatar": "./avatar/index.js",
     "./chat-bubble": "./chat-bubble/index.js",
     "./loading-bar": "./loading-bar/index.js",
+    "./prompt-input": "./prompt-input/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",

pages/prompt-input/permutations.page.tsx

@@ -0,0 +1,142 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import {} from "react";
+
+import Box from "@cloudscape-design/components/box";
+import Button from "@cloudscape-design/components/button";
+import FileTokenGroup from "@cloudscape-design/components/file-token-group";
+
+import { PromptInput, PromptInputProps } from "../../lib/components";
+import createPermutations from "../utils/permutations";
+import PermutationsView from "../utils/permutations-view";
+import img from "./custom-icon.png";
+
+const permutations = createPermutations<PromptInputProps>([
+  {
+    invalid: [false, true],
+    warning: [false, true],
+    actionButtonIconName: [undefined, "send"],
+    value: [
+      "",
+      "Short value 1",
+      "Long value 1, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    ],
+  },
+  {
+    value: [""],
+    placeholder: [
+      "Short placeholder",
+      "Long placeholder, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    ],
+  },
+  {
+    disabled: [false, true],
+    actionButtonIconName: [undefined, "send"],
+    value: ["", "Short value 2"],
+  },
+  {
+    value: [
+      "",
+      "Short value 3",
+      "Long value 3, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    ],
+    actionButtonIconSvg: [
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" key="0">
+        <g>
+          <line x1="5.5" y1="12" x2="5.5" y2="15" />
+          <line x1="0.5" y1="15" x2="10.5" y2="15" />
+          <rect x="1" y="5" width="9" height="7" />
+          <polyline points="5 4 5 1 14 1 14 8 10 8" />
+        </g>
+      </svg>,
+    ],
+  },
+  {
+    value: [
+      "",
+      "Short value 4",
+      "Long value 4, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    ],
+    actionButtonIconUrl: [img],
+    actionButtonIconAlt: ["Letter A"],
+  },
+  {
+    value: ["Short value 5"],
+    actionButtonIconName: [undefined, "send"],
+    secondaryActions: [undefined, "secondary actions 1"],
+    secondaryContent: [undefined, "secondary content 1"],
+    invalid: [false, true],
+  },
+  {
+    value: ["Short value 6"],
+    actionButtonIconName: ["send"],
+    secondaryActions: ["secondary actions 2"],
+    secondaryContent: ["secondary content 2"],
+    disableSecondaryActionsPaddings: [false, true],
+    disableSecondaryContentPaddings: [false, true],
+  },
+  {
+    value: ["Short value for custom primary actions"],
+    actionButtonIconName: [undefined, "send"],
+    customPrimaryAction: [
+      undefined,
+      <Button variant="icon" iconName="add-plus" ariaLabel="Custom action" key="button" />,
+    ],
+    secondaryActions: [undefined, "secondary actions"],
+    disableSecondaryActionsPaddings: [false, true],
+  },
+  {
+    value: ["Short value for secondary action responsiveness"],
+    actionButtonIconName: [undefined, "send"],
+    secondaryActions: [
+      "short",
+      "longer but breakable secondary action content",
+      "longerbutunbreakablesecondaryactioncontent",
+      <FileTokenGroup
+        key="file-token"
+        items={[
+          {
+            file: new File([new Blob(["Test content"])], "test-for-venue-use-case.pdf", {
+              type: "application/pdf",
+              lastModified: 1590962400000,
+            }),
+          },
+        ]}
+        onDismiss={() => {}}
+        showFileSize={true}
+        showFileLastModified={true}
+        showFileThumbnail={true}
+        i18nStrings={{
+          removeFileAriaLabel: () => "Remove file",
+          limitShowFewer: "Show fewer files",
+          limitShowMore: "Show more files",
+          errorIconAriaLabel: "Error",
+          warningIconAriaLabel: "Warning",
+        }}
+      />,
+    ],
+  },
+]);
+
+export default function PromptInputPermutations() {
+  return (
+    <>
+      <h1>PromptInput permutations</h1>
+      <Box padding="m">
+        <PermutationsView
+          permutations={permutations}
+          render={(permutation, index) => (
+            <PromptInput
+              ariaLabel={`Prompt input test ${index}`}
+              actionButtonAriaLabel="Action button aria label"
+              onChange={() => {
+                /*empty handler to suppress react controlled property warning*/
+              }}
+              {...permutation}
+            />
+          )}
+        />
+      </Box>
+    </>
+  );
+}

pages/prompt-input/prompt-input-integ.page.tsx

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+
+import { PromptInput } from "../../lib/components";
+
+export default function Page() {
+  const [value, setValue] = useState("");
+  const [submitStatus, setSubmitStatus] = useState(false);
+  const [isKeyboardSubmittingDisabled, setDisableKeyboardSubmitting] = useState(false);
+
+  return (
+    <div id="test">
+      <h1>Prompt input submit check</h1>
+      {submitStatus ? <div id="submit-success">Submitted</div> : null}
+      <form
+        onSubmit={(event) => {
+          console.log("submitted");
+          event.preventDefault();
+          setSubmitStatus(true);
+        }}
+      >
+        <PromptInput
+          ariaLabel="test prompt input"
+          actionButtonIconName="send"
+          actionButtonAriaLabel="Send"
+          value={value}
+          onChange={(event) => setValue(event.detail.value)}
+          onAction={() => window.alert("Sent message!")}
+          onKeyDown={(event) => {
+            if (isKeyboardSubmittingDisabled) {
+              console.log("prevent!");
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          }}
+        />
+        <button id="disable-form-submitting" onClick={() => setDisableKeyboardSubmitting(true)} type="button">
+          Disable keyboard form submitting
+        </button>
+      </form>
+    </div>
+  );
+}