From 598dae32f5026dd8b33908519eb876843369b542 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Tue, 26 May 2026 13:47:04 +0200
Subject: [PATCH] chore: split prompt-input permutations page into separate
 files

---
 pages/prompt-input/permutations.page.tsx      | 178 ------------------
 .../secondary-content-permutations.page.tsx   |  92 +++++++++
 .../prompt-input/token-permutations.page.tsx  | 156 +++++++++++++++
 3 files changed, 248 insertions(+), 178 deletions(-)
 create mode 100644 pages/prompt-input/secondary-content-permutations.page.tsx
 create mode 100644 pages/prompt-input/token-permutations.page.tsx

diff --git a/pages/prompt-input/permutations.page.tsx b/pages/prompt-input/permutations.page.tsx
index 37690ad308..43dc00a2a0 100644
--- a/pages/prompt-input/permutations.page.tsx
+++ b/pages/prompt-input/permutations.page.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { Button, FileTokenGroup } from '~components';
 import PromptInput, { PromptInputProps } from '~components/prompt-input';
 
 import img from '../icon/custom-icon.png';
@@ -59,183 +58,6 @@ const permutations = createPermutations<PromptInputProps>([
     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',
-        }}
-      />,
-    ],
-  },
-  // Token mode: Basic text and references
-  {
-    tokens: [
-      [{ type: 'text', value: 'Simple text' }],
-      [
-        { type: 'text', value: 'Text with ' },
-        { type: 'reference', id: 'ref-1', label: 'Reference', value: 'ref1', menuId: 'mentions' },
-      ],
-      [
-        { type: 'reference', id: 'ref-1', label: 'Ref1', value: 'ref1', menuId: 'mentions' },
-        { type: 'text', value: ' ' },
-        { type: 'reference', id: 'ref-2', label: 'Ref2', value: 'ref2', menuId: 'mentions' },
-      ],
-    ],
-  },
-  // Token mode: Multiline content
-  {
-    tokens: [
-      [
-        { type: 'text', value: 'Line 1' },
-        { type: 'break', value: '\n' },
-        { type: 'text', value: 'Line 2' },
-      ],
-      [
-        { type: 'text', value: 'A' },
-        { type: 'break', value: '\n' },
-        { type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
-        { type: 'break', value: '\n' },
-        { type: 'text', value: 'B' },
-      ],
-    ],
-  },
-  // Token mode: Triggers (menus required for trigger rendering)
-  {
-    tokens: [
-      [{ type: 'trigger', triggerChar: '@', value: '', id: 'trig-1' }],
-      [{ type: 'trigger', triggerChar: '@', value: 'user', id: 'trig-1' }],
-      [
-        { type: 'text', value: 'Text ' },
-        { type: 'trigger', triggerChar: '@', value: 'User', id: 'trig-1' },
-      ],
-    ],
-    menus: [
-      [
-        {
-          id: 'mentions',
-          trigger: '@',
-          options: [
-            { value: 'user1', label: 'User 1' },
-            { value: 'user2', label: 'User 2' },
-          ],
-        },
-      ],
-    ],
-  },
-  // Token mode: Pinned references
-  {
-    tokens: [
-      [
-        { type: 'reference', id: 'pin-1', label: 'Pinned', value: 'pin1', menuId: 'mentions', pinned: true },
-        { type: 'text', value: 'Content' },
-      ],
-      [
-        { type: 'reference', id: 'pin-1', label: 'Pin1', value: 'pin1', menuId: 'mentions', pinned: true },
-        { type: 'reference', id: 'pin-2', label: 'Pin2', value: 'pin2', menuId: 'mentions', pinned: true },
-        { type: 'text', value: 'Text' },
-      ],
-    ],
-  },
-  // Token mode: Complex mixed (menus required for trigger)
-  {
-    tokens: [
-      [
-        { type: 'reference', id: 'pin-1', label: 'P1', value: 'p1', menuId: 'mentions', pinned: true },
-        { type: 'text', value: 'Start ' },
-        { type: 'trigger', triggerChar: '@', value: 'trig', id: 'trig-1' },
-        { type: 'text', value: ' ' },
-        { type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
-        { type: 'break', value: '\n' },
-        { type: 'text', value: 'Line 2' },
-      ],
-    ],
-    menus: [
-      [
-        {
-          id: 'mentions',
-          trigger: '@',
-          options: [
-            { value: 'user1', label: 'User 1' },
-            { value: 'user2', label: 'User 2' },
-          ],
-        },
-      ],
-    ],
-  },
-  // Token mode: State variations
-  {
-    tokens: [
-      [
-        { type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
-        { type: 'text', value: 'Tell me about ' },
-        { type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
-      ],
-    ],
-    disabled: [false, true],
-    readOnly: [false, true],
-    invalid: [false, true],
-  },
-  // Token mode: Warning state
-  {
-    tokens: [
-      [
-        { type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
-        { type: 'text', value: 'Tell me about ' },
-        { type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
-      ],
-    ],
-    disabled: [false, true],
-    readOnly: [false, true],
-    warning: [true],
-  },
 ]);
 
 export default function PromptInputPermutations() {
diff --git a/pages/prompt-input/secondary-content-permutations.page.tsx b/pages/prompt-input/secondary-content-permutations.page.tsx
new file mode 100644
index 0000000000..a0815235d8
--- /dev/null
+++ b/pages/prompt-input/secondary-content-permutations.page.tsx
@@ -0,0 +1,92 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Button, FileTokenGroup } from '~components';
+import PromptInput, { PromptInputProps } from '~components/prompt-input';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const permutations = createPermutations<PromptInputProps>([
+  {
+    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 SecondaryContentPermutations() {
+  return (
+    <>
+      <h1>PromptInput secondary content permutations</h1>
+      <ScreenshotArea>
+        <PermutationsView
+          permutations={permutations}
+          render={(permutation, index) => (
+            <PromptInput
+              ariaLabel={`Prompt input secondary content test ${index}`}
+              actionButtonAriaLabel="Action button aria label"
+              onChange={() => {
+                /*empty handler to suppress react controlled property warning*/
+              }}
+              {...permutation}
+            />
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}
diff --git a/pages/prompt-input/token-permutations.page.tsx b/pages/prompt-input/token-permutations.page.tsx
new file mode 100644
index 0000000000..799d612773
--- /dev/null
+++ b/pages/prompt-input/token-permutations.page.tsx
@@ -0,0 +1,156 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import PromptInput, { PromptInputProps } from '~components/prompt-input';
+
+import createPermutations from '../utils/permutations';
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+
+const permutations = createPermutations<PromptInputProps>([
+  // Token mode: Basic text and references
+  {
+    tokens: [
+      [{ type: 'text', value: 'Simple text' }],
+      [
+        { type: 'text', value: 'Text with ' },
+        { type: 'reference', id: 'ref-1', label: 'Reference', value: 'ref1', menuId: 'mentions' },
+      ],
+      [
+        { type: 'reference', id: 'ref-1', label: 'Ref1', value: 'ref1', menuId: 'mentions' },
+        { type: 'text', value: ' ' },
+        { type: 'reference', id: 'ref-2', label: 'Ref2', value: 'ref2', menuId: 'mentions' },
+      ],
+    ],
+  },
+  // Token mode: Multiline content
+  {
+    tokens: [
+      [
+        { type: 'text', value: 'Line 1' },
+        { type: 'break', value: '\n' },
+        { type: 'text', value: 'Line 2' },
+      ],
+      [
+        { type: 'text', value: 'A' },
+        { type: 'break', value: '\n' },
+        { type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
+        { type: 'break', value: '\n' },
+        { type: 'text', value: 'B' },
+      ],
+    ],
+  },
+  // Token mode: Triggers (menus required for trigger rendering)
+  {
+    tokens: [
+      [{ type: 'trigger', triggerChar: '@', value: '', id: 'trig-1' }],
+      [{ type: 'trigger', triggerChar: '@', value: 'user', id: 'trig-1' }],
+      [
+        { type: 'text', value: 'Text ' },
+        { type: 'trigger', triggerChar: '@', value: 'User', id: 'trig-1' },
+      ],
+    ],
+    menus: [
+      [
+        {
+          id: 'mentions',
+          trigger: '@',
+          options: [
+            { value: 'user1', label: 'User 1' },
+            { value: 'user2', label: 'User 2' },
+          ],
+        },
+      ],
+    ],
+  },
+  // Token mode: Pinned references
+  {
+    tokens: [
+      [
+        { type: 'reference', id: 'pin-1', label: 'Pinned', value: 'pin1', menuId: 'mentions', pinned: true },
+        { type: 'text', value: 'Content' },
+      ],
+      [
+        { type: 'reference', id: 'pin-1', label: 'Pin1', value: 'pin1', menuId: 'mentions', pinned: true },
+        { type: 'reference', id: 'pin-2', label: 'Pin2', value: 'pin2', menuId: 'mentions', pinned: true },
+        { type: 'text', value: 'Text' },
+      ],
+    ],
+  },
+  // Token mode: Complex mixed (menus required for trigger)
+  {
+    tokens: [
+      [
+        { type: 'reference', id: 'pin-1', label: 'P1', value: 'p1', menuId: 'mentions', pinned: true },
+        { type: 'text', value: 'Start ' },
+        { type: 'trigger', triggerChar: '@', value: 'trig', id: 'trig-1' },
+        { type: 'text', value: ' ' },
+        { type: 'reference', id: 'ref-1', label: 'Ref', value: 'ref1', menuId: 'mentions' },
+        { type: 'break', value: '\n' },
+        { type: 'text', value: 'Line 2' },
+      ],
+    ],
+    menus: [
+      [
+        {
+          id: 'mentions',
+          trigger: '@',
+          options: [
+            { value: 'user1', label: 'User 1' },
+            { value: 'user2', label: 'User 2' },
+          ],
+        },
+      ],
+    ],
+  },
+  // Token mode: State variations
+  {
+    tokens: [
+      [
+        { type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
+        { type: 'text', value: 'Tell me about ' },
+        { type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
+      ],
+    ],
+    disabled: [false, true],
+    readOnly: [false, true],
+    invalid: [false, true],
+  },
+  // Token mode: Warning state
+  {
+    tokens: [
+      [
+        { type: 'reference', id: 'pin-1', label: 'Dev Mode', value: 'dev', menuId: 'mode', pinned: true },
+        { type: 'text', value: 'Tell me about ' },
+        { type: 'reference', id: 'ref-1', label: 'Alice Smith', value: 'user-1', menuId: 'mentions' },
+      ],
+    ],
+    disabled: [false, true],
+    readOnly: [false, true],
+    warning: [true],
+  },
+]);
+
+export default function TokenPermutations() {
+  return (
+    <>
+      <h1>PromptInput token permutations</h1>
+      <ScreenshotArea>
+        <PermutationsView
+          permutations={permutations}
+          render={(permutation, index) => (
+            <PromptInput
+              ariaLabel={`Prompt input token test ${index}`}
+              actionButtonAriaLabel="Action button aria label"
+              onChange={() => {
+                /*empty handler to suppress react controlled property warning*/
+              }}
+              {...permutation}
+            />
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}