@aws/mynah-ui 4.36.2 → 4.36.3

package/dist/static.d.ts

@@ -4,6 +4,7 @@
  */
 import { CheckboxAbstract, CheckboxProps } from './components/form-items/checkbox';
 import { FormItemListAbstract, FormItemListProps } from './components/form-items/form-item-list';
+import { FormItemPillBoxAbstract, FormItemPillBoxProps } from './components/form-items/form-item-pill-box';
 import { SwitchAbstract, SwitchProps } from './components/form-items/switch';
 import { CustomIcon, MynahIcons, MynahIconsType } from './components/icon';
 import { ChatItemBodyRenderer } from './helper/dom';
@@ -398,6 +399,7 @@ export interface ChatItemContent {
         hideFileCount?: boolean;
         actions?: Record<string, FileNodeAction[]>;
         details?: Record<string, TreeNodeDetails>;
+        renderAsPills?: boolean;
     } | null;
     buttons?: ChatItemButton[] | null;
     formItems?: ChatItemFormItem[] | null;
@@ -462,7 +464,7 @@ interface BaseFormItem {
     boldTitle?: boolean;
 }
 export type TextBasedFormItem = BaseFormItem & {
-    type: 'textarea' | 'textinput' | 'numericinput' | 'email';
+    type: 'textarea' | 'textinput' | 'numericinput' | 'email' | 'pillbox';
     autoFocus?: boolean;
     checkModifierEnterKeyPress?: boolean;
     validationPatterns?: {
@@ -728,6 +730,7 @@ export interface ComponentOverrides {
     TextInput?: new (props: TextInputProps) => ExtractMethods<TextInputAbstract>;
     TextArea?: new (props: TextAreaProps) => ExtractMethods<TextAreaAbstract>;
     FormItemList?: new (props: FormItemListProps) => ExtractMethods<FormItemListAbstract>;
+    FormItemPillBox?: new (props: FormItemPillBoxProps) => ExtractMethods<FormItemPillBoxAbstract>;
 }
 export interface ConfigOptions {
     feedbackOptions: Array<{

package/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;
@@ -1338,6 +1343,7 @@ interface ChatItemContent {
     folderIcon?: MynahIcons | MynahIconsType | null;
     collapsed?: boolean;
     hideFileCount?: boolean;
+    renderAsPills?: boolean; // When true (header only), renders files as inline pills instead of tree
     actions?: Record<string, FileNodeAction[]>;
     details?: Record<string, TreeNodeDetails>;
   } | null;
@@ -2481,10 +2487,80 @@ mynahUI.addChatItem(tabId, {
 
 **NOTE 4:** In case you want a flat list, where all subfolders are not rendered but just all the files, you can pass `true` to the `flatList` prop.
 
+**NOTE 5:** When using `renderAsPills: true` in a header's fileList, files will be displayed as inline pills instead of a traditional file tree. This is useful for showing a compact list of files that were processed or referenced.
+
 <p align="center">
   <img src="./img/data-model/chatItems/codeResult.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
 
+#### `renderAsPills` (default: `false`)
+When set to `true` in a header's fileList, files will be rendered as inline pills next to the header text instead of a traditional file tree. This creates a compact display perfect for showing files that were read, processed, or referenced.
+
+**Features:**
+- Files appear as clickable pills inline with the header text and icon
+- Uses `visibleName` from details as pill text (falls back to full file path)
+- Deleted files get special styling with `mynah-chat-item-tree-file-pill-deleted` class
+- Pills support hover tooltips when `description` is provided in details
+- Header icon is automatically included in the custom renderer for proper alignment
+- Pills dispatch `FILE_CLICK` events when clicked, same as regular file tree items
+- Only works when `renderAsPills: true` is set in a header's fileList (not main fileList)
+
+**Important Notes:**
+- This feature only works within a `header.fileList`, not in the main chat item `fileList`
+- When `renderAsPills: true`, the traditional file tree is replaced with inline pills
+- The header's `body`, `icon`, and file pills are all rendered together in a custom renderer
+- Empty `filePaths` array will result in no pills being rendered
+
+```typescript
+mynahUI.addChatItem('tab-1', {
+  type: ChatItemType.ANSWER,
+  header: {
+    icon: MynahIcons.EYE,
+    body: '5 files read',
+    fileList: {
+      filePaths: ['package.json', 'tsconfig.json', 'src/index.ts'],
+      renderAsPills: true,
+      details: {
+        'package.json': {
+          visibleName: 'package',
+          description: 'Project configuration'
+        },
+        'tsconfig.json': {
+          visibleName: 'tsconfig',
+          description: 'TypeScript configuration'
+        },
+        'src/index.ts': {
+          visibleName: 'index.ts',
+          description: 'Main entry point'
+        }
+      },
+      deletedFiles: ['src/index.ts'] // Will show with deleted styling
+    }
+  },
+});
+```
+
+<p align="center">
+  <img src="./img/data-model/chatItems/renderAsPills.png" alt="renderAsPills" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+**Comparison with regular file tree:**
+
+```typescript
+// Regular file tree (renderAsPills: false or undefined)
+mynahUI.addChatItem('tab-1', {
+  type: ChatItemType.ANSWER,
+  header: {
+    icon: MynahIcons.EYE,
+    body: 'Files analyzed',
+    fileList: {
+      filePaths: ['package.json', 'src/index.ts'],
+      renderAsPills: false // or omit this property
+    }
+  }
+});
+```
+
 
 #### File `details`
 
@@ -2791,7 +2867,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 +3054,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',

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.36.2",
+    "version": "4.36.3",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",