feat: Add FormItemPillBox Component for Multi-Value Input (#418)

* feat: add FormItemPillBox component for multi-value input

- Add new FormItemPillBox component for entering multiple values as pills
- Users can type text and press Enter to create pills
- Pills can be removed by clicking the × button
- Component supports get/set values as comma-separated strings
- Includes comprehensive unit tests with 89.85% coverage
- Add component to ComponentOverrides interface for customization
- Styled with consistent Mynah UI design patterns

* fix: resolve linting errors in pill box component

- Remove unused imports (generateUID, SingularFormItem)
- Use nullish coalescing operator (??) instead of logical OR
- Add explicit string/boolean checks for strict boolean expressions
- Fix trailing spaces and missing newlines

* fix: format SCSS file with prettier

* feat: adding pill box chat item form items type

* fix: lint errors

* minor edits

* Updating documentation

---------

Co-authored-by: Your Name <[email protected]>

Author: laileni-aws

docs/DATAMODEL.md

@@ -1153,7 +1153,7 @@ interface ChatItemButton {
   icon?: MynahIcons;
 }
 
-type ChatItemFormItem = TextBasedFormItem | DropdownFormItem | RadioGroupFormItem | CheckboxFormItem | ListFormItem | Stars;
+type ChatItemFormItem = TextBasedFormItem | DropdownFormItem | RadioGroupFormItem | CheckboxFormItem | ListFormItem | Stars | PillboxFormItem;
 
 export interface ValidationPattern {
   pattern: string | RegExp;
@@ -1240,6 +1240,11 @@ export interface ListItemEntry {
   value: Record<string, string>;
 }
 
+type PillboxFormItem = BaseFormItem & {
+  type: 'pillbox';
+  value?: string;
+};
+
 interface FileNodeAction {
   name: string;
   label?: string;
@@ -2791,7 +2796,7 @@ Let's take a look to the data type of a form item:
 ```typescript
 interface ChatItemFormItem {
   id: string; // id is mandatory to understand to get the specific values for each form item when a button is clicked
-  type: 'select' | 'textarea' | 'textinput' | 'numericinput' | 'stars' | 'radiogroup' | 'toggle' | 'checkbox' | 'switch' ; // type (see below for each of them)
+  type: 'select' | 'textarea' | 'textinput' | 'numericinput' | 'stars' | 'radiogroup' | 'toggle' | 'checkbox' | 'switch' | 'pillbox' ; // type (see below for each of them)
   mandatory?: boolean; // If it is set to true, buttons in the same card with waitMandatoryFormItems set to true will wait them to be filled
   hideMandatoryIcon?: boolean; // If it is set to true, it won't render an asterisk icon next to the form label
   title?: string; // Label of the input
@@ -2978,6 +2983,14 @@ mynahUI.addChatItem(tabId, {
             type: 'stars',
             title: `How do feel about our AI assistant in general?`,
         },
+        {
+            id: 'skills',
+            type: 'pillbox',
+            title: 'Programming Languages & Technologies',
+            description: 'Add your programming languages and technologies (press Enter to add)',
+            placeholder: 'Type a skill and press Enter',
+            value: 'JavaScript,TypeScript,React,Node.js',
+        },
         {
             id: 'description',
             type: 'textarea',

example/src/samples/sample-data.ts

@@ -933,6 +933,14 @@ _To send the form, mandatory items should be filled._`,
             type: 'stars',
             title: `How do feel about our AI assistant in general?`,
         },
+        {
+            id: 'skills',
+            type: 'pillbox',
+            title: 'Skills and Technologies',
+            description: 'Add your programming languages and technologies (press Enter to add)',
+            placeholder: 'Type a skill and press Enter',
+            value: 'JavaScript,TypeScript,React',
+        },
         {
             id: 'description',
             type: 'textarea',
@@ -2342,6 +2350,13 @@ export const sampleMCPDetails = (title: string): DetailedList => {
                 description: 'Seconds',
                 id: 'timeout',
             },
+            { // Add mandatory field
+                id: 'args-pillbox',
+                type: 'pillbox',
+                title: 'Arguments - pillbox',
+                placeholder: 'Type arguments and press Enter',
+                value: '-y,@modelcontextprotocol/server-filesystem,/Users/username/Desktop,/path/to/other/allowed/dir',
+            },
             {
                 id: 'args',
                 type: 'list',

src/__test__/components/form-items/form-item-pill-box.spec.ts

@@ -0,0 +1,53 @@
+import { FormItemPillBox } from '../../../components/form-items/form-item-pill-box';
+
+describe('FormItemPillBox', () => {
+  let pillBox: FormItemPillBox;
+
+  beforeEach(() => {
+    pillBox = new FormItemPillBox({
+      id: 'test-pill-box',
+      label: 'Test Pills',
+      placeholder: 'Add a pill'
+    });
+    document.body.appendChild(pillBox.render);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should render pill box', () => {
+    expect(pillBox.render).toBeDefined();
+    expect(pillBox.render.querySelector('.mynah-form-item-pill-box-wrapper')).toBeTruthy();
+  });
+
+  it('should add pill on enter', () => {
+    const input = pillBox.render.querySelector('.mynah-form-item-pill-box-input') as HTMLTextAreaElement;
+    input.value = 'test-pill';
+
+    const event = new KeyboardEvent('keydown', { key: 'Enter' });
+    input.dispatchEvent(event);
+
+    expect(pillBox.getValue()).toBe('test-pill');
+    expect(pillBox.render.querySelector('.mynah-form-item-pill')).toBeTruthy();
+  });
+
+  it('should remove pill on click', () => {
+    pillBox.setValue('pill1,pill2');
+
+    const removeButton = pillBox.render.querySelector('.mynah-form-item-pill-remove') as HTMLElement;
+    removeButton.click();
+
+    expect(pillBox.getValue()).toBe('pill2');
+  });
+
+  it('should set and get values', () => {
+    pillBox.setValue('tag1,tag2,tag3');
+    expect(pillBox.getValue()).toBe('tag1,tag2,tag3');
+  });
+
+  it('should disable component', () => {
+    pillBox.setEnabled(false);
+    expect(pillBox.render.hasAttribute('disabled')).toBe(true);
+  });
+});

src/components/chat-item/chat-item-form-items.ts

@@ -13,6 +13,7 @@ import { Card } from '../card/card';
 import { CardBody } from '../card/card-body';
 import { Checkbox } from '../form-items/checkbox';
 import { FormItemList } from '../form-items/form-item-list';
+import { FormItemPillBox } from '../form-items/form-item-pill-box';
 import { RadioGroup } from '../form-items/radio-group';
 import { Select } from '../form-items/select';
 import { Stars } from '../form-items/stars';
@@ -32,7 +33,7 @@ export interface ChatItemFormItemsWrapperProps {
 }
 export class ChatItemFormItemsWrapper {
   private readonly props: ChatItemFormItemsWrapperProps;
-  private readonly options: Record<string, Select | TextArea | TextInput | RadioGroup | Stars | Checkbox | FormItemList> = {};
+  private readonly options: Record<string, Select | TextArea | TextInput | RadioGroup | Stars | Checkbox | FormItemList | FormItemPillBox> = {};
   private readonly validationItems: Record<string, boolean> = {};
   private isValid: boolean = false;
   private tooltipOverlay: Overlay | null;
@@ -235,6 +236,17 @@ export class ChatItemFormItemsWrapper {
               ...(this.getHandlers(chatItemOption))
             });
             break;
+          case 'pillbox':
+            chatOption = new FormItemPillBox({
+              id: chatItemOption.id,
+              wrapperTestId: testIds.chatItem.chatItemForm.itemInput,
+              label,
+              description,
+              value,
+              placeholder: chatItemOption.placeholder,
+              ...(this.getHandlers(chatItemOption))
+            });
+            break;
           case 'stars':
             chatOption = new Stars({
               wrapperTestId: testIds.chatItem.chatItemForm.itemStarsWrapper,
@@ -313,7 +325,7 @@ export class ChatItemFormItemsWrapper {
 
   private readonly getHandlers = (chatItemOption: ChatItemFormItem): Object => {
     if (chatItemOption.mandatory === true ||
-      ([ 'textarea', 'textinput', 'numericinput', 'email' ].includes(chatItemOption.type) && (chatItemOption as TextBasedFormItem).validationPatterns != null)) {
+      ([ 'textarea', 'textinput', 'numericinput', 'email', 'pillbox' ].includes(chatItemOption.type) && (chatItemOption as TextBasedFormItem).validationPatterns != null)) {
       // Set initial validation status
       this.validationItems[chatItemOption.id] = this.isItemValid(chatItemOption.value as string ?? '', chatItemOption);
       return {

src/components/form-items/form-item-pill-box.ts

@@ -0,0 +1,203 @@
+/*!
+ * Copyright 2022 Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Config } from '../../helper/config';
+import { DomBuilder, ExtendedHTMLElement } from '../../helper/dom';
+import { cancelEvent } from '../../helper/events';
+import { StyleLoader } from '../../helper/style-loader';
+
+export interface FormItemPillBoxProps {
+  id: string;
+  value?: string;
+  classNames?: string[];
+  attributes?: Record<string, string>;
+  label?: HTMLElement | ExtendedHTMLElement | string;
+  description?: ExtendedHTMLElement;
+  placeholder?: string;
+  wrapperTestId?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+export abstract class FormItemPillBoxAbstract {
+  render: ExtendedHTMLElement;
+  setValue = (value: string): void => { };
+  getValue = (): string => '';
+  setEnabled = (enabled: boolean): void => { };
+}
+
+export class FormItemPillBoxInternal extends FormItemPillBoxAbstract {
+  private readonly props: FormItemPillBoxProps;
+  private readonly pillsContainer: ExtendedHTMLElement;
+  private readonly input: ExtendedHTMLElement;
+  private readonly wrapper: ExtendedHTMLElement;
+  private pills: string[] = [];
+  render: ExtendedHTMLElement;
+
+  constructor (props: FormItemPillBoxProps) {
+    StyleLoader.getInstance().load('components/form-items/_form-item-pill-box.scss');
+    super();
+    this.props = props;
+
+    // Create pills container
+    this.pillsContainer = DomBuilder.getInstance().build({
+      type: 'div',
+      classNames: [ 'mynah-form-item-pill-box-pills-container' ],
+    });
+
+    // Create input field
+    this.input = DomBuilder.getInstance().build({
+      type: 'textarea',
+      classNames: [ 'mynah-form-item-pill-box-input' ],
+      attributes: {
+        placeholder: props.placeholder ?? 'Type and press Enter to add a tag',
+        rows: '1',
+      },
+      events: {
+        keydown: (e: KeyboardEvent) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            cancelEvent(e);
+            const value = (this.input as unknown as HTMLTextAreaElement).value.trim();
+            if (value !== '') {
+              this.addPill(value);
+              (this.input as unknown as HTMLTextAreaElement).value = '';
+              this.notifyChange();
+            }
+          }
+        }
+      }
+    });
+
+    // Create wrapper
+    this.wrapper = DomBuilder.getInstance().build({
+      type: 'div',
+      classNames: [ 'mynah-form-item-pill-box-wrapper' ],
+      children: [
+        this.pillsContainer,
+        this.input
+      ]
+    });
+
+    // Create main container
+    this.render = DomBuilder.getInstance().build({
+      type: 'div',
+      classNames: [ 'mynah-form-input-wrapper', ...(props.classNames ?? []) ],
+      attributes: props.attributes,
+      testId: props.wrapperTestId,
+      children: [
+        {
+          type: 'span',
+          classNames: [ 'mynah-form-input-label' ],
+          children: [
+            ...(props.label !== undefined ? [ props.label ] : []),
+          ]
+        },
+        ...(props.description !== undefined ? [ props.description ] : []),
+        this.wrapper
+      ]
+    });
+
+    // Initialize with existing value
+    if (props.value != null) {
+      this.setValue(props.value);
+    }
+
+    // Set initial disabled state
+    if (props.disabled === true) {
+      this.setEnabled(false);
+    }
+  }
+
+  private addPill (text: string): void {
+    if (text === '' || this.pills.includes(text)) {
+      return;
+    }
+
+    this.pills.push(text);
+
+    const pill = DomBuilder.getInstance().build({
+      type: 'div',
+      classNames: [ 'mynah-form-item-pill' ],
+      children: [
+        {
+          type: 'span',
+          classNames: [ 'mynah-form-item-pill-text' ],
+          children: [ text ]
+        },
+        {
+          type: 'span',
+          classNames: [ 'mynah-form-item-pill-remove' ],
+          children: [ '×' ],
+          events: {
+            click: (e) => {
+              cancelEvent(e);
+              pill.remove();
+              this.pills = this.pills.filter(p => p !== text);
+              this.notifyChange();
+            }
+          }
+        }
+      ]
+    });
+
+    this.pillsContainer.appendChild(pill);
+  }
+
+  private notifyChange (): void {
+    if (this.props.onChange != null) {
+      this.props.onChange(this.getValue());
+    }
+  }
+
+  setValue = (value: string): void => {
+    // Clear existing pills
+    this.pillsContainer.innerHTML = '';
+    this.pills = [];
+
+    // Add new pills
+    if (value !== '') {
+      const pillValues = value.split(/[,\n]+/).map(v => v.trim()).filter(v => v);
+      pillValues.forEach(pill => this.addPill(pill));
+    }
+  };
+
+  getValue = (): string => {
+    return this.pills.join(',');
+  };
+
+  setEnabled = (enabled: boolean): void => {
+    if (enabled) {
+      this.render.removeAttribute('disabled');
+      (this.input as unknown as HTMLTextAreaElement).disabled = false;
+    } else {
+      this.render.setAttribute('disabled', 'disabled');
+      (this.input as unknown as HTMLTextAreaElement).disabled = true;
+    }
+  };
+}
+
+export class FormItemPillBox extends FormItemPillBoxAbstract {
+  render: ExtendedHTMLElement;
+  private readonly instance: FormItemPillBoxAbstract;
+
+  constructor (props: FormItemPillBoxProps) {
+    super();
+    const InternalClass = Config.getInstance().config.componentClasses.FormItemPillBox ?? FormItemPillBoxInternal;
+    this.instance = new InternalClass(props);
+    this.render = this.instance.render;
+  }
+
+  setValue = (value: string): void => {
+    this.instance.setValue(value);
+  };
+
+  getValue = (): string => {
+    return this.instance.getValue();
+  };
+
+  setEnabled = (enabled: boolean): void => {
+    this.instance.setEnabled(enabled);
+  };
+}