@aws/mynah-ui 4.35.5 → 4.35.7-beta.1

package/dist/static.d.ts

@@ -19,12 +19,21 @@ export interface QuickActionCommand {
     children?: QuickActionCommandGroup[];
     route?: string[];
 }
+export interface CustomQuickActionCommand extends QuickActionCommand {
+    content?: Uint8Array;
+}
 export interface QuickActionCommandGroup {
     groupName?: string;
     icon?: MynahIcons | MynahIconsType;
     actions?: Action[];
     commands: QuickActionCommand[];
 }
+export interface QuickActionCommandsHeader {
+    icon?: MynahIcons | MynahIconsType;
+    title?: string;
+    description?: string;
+    status?: Status;
+}
 /**
  * data store model to update the mynah ui partially or fully
  */
@@ -74,6 +83,10 @@ export interface MynahUIDataModel {
     */
     quickActionCommands?: QuickActionCommandGroup[];
     /**
+    * Quick Action commands header information block
+    */
+    quickActionCommandsHeader?: QuickActionCommandsHeader;
+    /**
     * Context commands to show when user hits @ to the input any point
     */
     contextCommands?: QuickActionCommandGroup[];
@@ -157,6 +170,10 @@ export interface MynahUIDataModel {
     tabMetadata?: {
         [key: string]: string | boolean | number;
     };
+    /**
+     * Custom context commands to be inserted into the prompt input.
+     */
+    customContextCommand?: QuickActionCommand[];
 }
 export interface MynahUITabStoreTab {
     /**
@@ -213,10 +230,14 @@ export declare enum MynahEventNames {
     PROMPT_PROGRESS_ACTION_CLICK = "promptProgressActionClick",
     ROOT_RESIZE = "rootResize",
     CONTEXT_SELECTED = "contextSelected",
+    OPEN_FILE_SYSTEM = "openFileSystem",
+    ADD_CUSTOM_CONTEXT = "addCustomContext",
     TOP_BAR_ITEM_ADD = "promptInputTopBarItemAdd",
     TOP_BAR_ITEM_REMOVE = "promptInputTopBarItemRemove",
     TOP_BAR_BUTTON_CLICK = "promptInputTopBarButtonClick",
-    CONTEXT_PINNED = "contextPinned"
+    CONTEXT_PINNED = "contextPinned",
+    FILES_DROPPED = "filesDropped",
+    CONTEXT_INSERTED = "contextInserted"
 }
 export declare enum MynahPortalNames {
     WRAPPER = "wrapper",
@@ -421,6 +442,8 @@ export interface ChatItem extends ChatItemContent {
     hoverEffect?: boolean;
     status?: Status;
     shimmer?: boolean;
+    collapse?: boolean;
+    border?: boolean;
 }
 export interface ValidationPattern {
     pattern: string | RegExp;

package/docs/DATAMODEL.md

@@ -122,6 +122,10 @@ interface MynahUIDataModel {
    * application state management for that purpose.
    */
   tabMetadata?: { [key: string]: string | boolean | number };
+  /**
+   * Custom context commands to be inserted into the prompt input.
+   */
+  customContextCommand: []
 }
 ```
 
@@ -3562,4 +3566,41 @@ export interface DetailedListItem {
   keywords?: string[];
 }
 }
-```
+```
+
+---
+
+### `quickActionCommandsHeader` (default: `{}`)
+Quick action commands header displays an informational banner above the quick action commands list when users hit `/` in the input. This is useful for providing additional context, warnings, or guidance about the available commands.
+
+The header supports various status styles (info, success, warning, error) and can include an icon, title, and description.
+
+```typescript
+const mynahUI = new MynahUI({
+    tabs: {
+        'tab-1': {
+            ...
+        }
+    }
+});
+
+mynahUI.updateStore('tab-1', {
+    quickActionCommands: [
+        // ... your commands here
+    ],
+    quickActionCommandsHeader: {
+        status: 'warning',
+        icon: MynahIcons.INFO,
+        title: 'New agentic capabilities',
+        description: 'You can now ask Q directly in the chat. You don\'t need to explicitly use /dev, /test, or /doc commands anymore.',
+    }
+})
+```
+
+<p align="center">
+  <img src="./img/data-model/tabStore/quickActionCommandsHeader.png" alt="quickActionCommandsHeader" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+The header will appear above the quick action commands list and provides information to users about new features.
+
+---

package/docs/PROPERTIES.md

@@ -189,6 +189,16 @@ export interface MynahUIProps {
     tabId: string,
     topBarButton: ChatItemButton,
     eventId?: string) => void;
+  onOpenFileDialogClick?: (
+    tabId: string,
+    fileType: string,
+    insertPosition: number
+  ) => void;
+  onFilesDropped?: (
+    tabId: string,
+    files: FileList,
+    insertPosition: number
+  ) => void;
 }
 ```
 _Let's deep dive into each property you can set._
@@ -1233,3 +1243,56 @@ onPromptTopBarButtonClick?: (
     };
 ...
 ```
+
+---
+
+### `onOpenFileDialogClick`
+
+This event will be fired when the user triggers the open file dialog action (for example, by typing `@image:`). It passes the `tabId` of the current tab, the `fileType` (such as 'image', 'file', etc.), and the `insertPosition` indicating where in the prompt input the file should be inserted.
+
+```typescript
+...
+onOpenFileDialogClick?: (
+  tabId: string,
+  fileType: string,
+  insertPosition: number
+) => void;
+...
+```
+
+**Example:**
+```typescript
+onOpenFileDialogClick: (tabId, fileType, insertPosition) => {
+  console.log(`Open file dialog for type '${fileType}' in tab '${tabId}' at position ${insertPosition}`);
+  // You can open your own file picker here
+},
+```
+
+---
+
+### `onFilesDropped`
+
+This event will be fired when the user drops files into the chat window. It passes the `tabId` of the current tab, the `files` (as a FileList), and the `insertPosition` indicating where in the prompt input the files should be inserted.
+
+```typescript
+...
+onFilesDropped?: (
+  tabId: string,
+  files: FileList,
+  insertPosition: number
+) => void;
+...
+```
+
+**Example:**
+```typescript
+onFilesDropped: (tabId, files, insertPosition) => {
+  console.log(`Files dropped in tab '${tabId}' at position ${insertPosition}`);
+  for (const file of files) {
+    console.log(`File: ${file.name}`);
+  }
+  // Handle the dropped files as needed
+},
+```
+
+---

package/docs/USAGE.md

@@ -29,6 +29,7 @@ mynahUI.notify(...);
 mynahUI.showCustomForm(...);
 mynahUI.updateTabDefaults(...);
 mynahUI.toggleSplashLoader(...);
+mynahUI.addCustomContextToPrompt(...);
 mynahUI.destroy();
 ```
 
@@ -678,4 +679,34 @@ The overlay will appear positioned relative to the specified top bar button, dis
 
 <p align="center">
   <img src="./img/topBarButtonOverlay.png" alt="Top Bar Button Overlay" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
-</p>
+</p>
+
+# Adding Custom Context to Prompt (`addCustomContextToPrompt`)
+
+You can programmatically add custom context items to the prompt input of a specific tab using the `addCustomContextToPrompt` function. This is useful for injecting custom context directly into the user's prompt field, and ensures the context is also tracked in the tab's data store.
+
+```typescript
+mynahUI.addCustomContextToPrompt(
+  tabId, // The ID of the tab to add the context to
+  [
+    {
+      command: 'sampleimage.png',
+      label: 'image',
+      description: 'This is a custom context item.',
+      icon: MynahIcons.IMAGE,
+    },
+    // ... more QuickActionCommand objects if needed
+  ],
+  0 // (Optional) Insert position in the prompt input. If omitted, appends to the end.
+);
+```
+
+- **tabId**: The string ID of the tab where the context should be added.
+- **contextItem**: An array of `QuickActionCommand` objects to insert. Each object can include `command`, `label`, `description`, `icon`, and other properties as defined in the data model.
+- **insertPosition** (optional): The position in the prompt input where the context should be inserted. If not provided, the context is appended to the end.
+
+When called, this function will:
+- Insert the provided context items as context pills in the prompt input field of the specified tab.
+- Update the tab's data store so that the custom context is tracked and can be referenced or removed later.
+
+**Note:** If the prompt input is not currently visible or the tab does not exist, the function will have no effect.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.35.5",
+    "version": "4.35.7-beta.1",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",
@@ -28,14 +28,20 @@
         "format:check": "npx prettier --check .",
         "format:write": "npx prettier --write .",
         "docker:clean": "docker rm -f mynah-ui-e2e-container || true",
-        "docker:build": "docker build -t mynah-ui-e2e -f Dockerfile .",
-        "docker:run": "docker run --name mynah-ui-e2e-container mynah-ui-e2e",
+        "docker:build": "node scripts/docker-build.js",
+        "docker:run": "docker run --name mynah-ui-e2e-container -e WEBKIT_FORCE_COMPLEX_TEXT=0 -e WEBKIT_DISABLE_COMPOSITING_MODE=1 mynah-ui-e2e",
         "docker:run:chromium": "docker run -e BROWSER=chromium --name mynah-ui-e2e-container mynah-ui-e2e",
-        "docker:run:webkit": "docker run -e BROWSER=webkit --name mynah-ui-e2e-container mynah-ui-e2e",
+        "docker:run:webkit": "docker run -e BROWSER=webkit -e WEBKIT_FORCE_COMPLEX_TEXT=0 -e WEBKIT_DISABLE_COMPOSITING_MODE=1 --name mynah-ui-e2e-container mynah-ui-e2e",
         "docker:extract": "docker cp mynah-ui-e2e-container:/app/ui-tests/__results__ ./ui-tests/ && docker cp mynah-ui-e2e-container:/app/ui-tests/__snapshots__ ./ui-tests/__results__/__snapshots__",
+        "playwright:setup": "node scripts/setup-playwright.js",
+        "playwright:version": "node scripts/get-playwright-version.js",
+        "playwright:pre-test": "node scripts/pre-test-setup.js",
         "tests:e2e": "npm run docker:clean && npm run docker:build && npm run docker:run",
         "tests:e2e:chromium": "npm run docker:clean && npm run docker:build && npm run docker:run:chromium",
         "tests:e2e:webkit": "npm run docker:clean && npm run docker:build && npm run docker:run:webkit",
+        "tests:e2e:webkit:local": "npm run playwright:pre-test && cd ui-tests && npm run e2e:webkit",
+        "tests:webkit:check": "node scripts/test-webkit.js",
+        "tests:e2e:local": "npm run playwright:pre-test && cd ui-tests && npm run e2e",
         "tests:e2e:trace": "cd ./ui-tests && npm run trace",
         "tests:unit": "jest --collect-coverage",
         "api-docs": "npx typedoc src/main.ts --out ./api-docs",
@@ -96,7 +102,7 @@
         "ts-loader": "^9.4.4",
         "ts-node": "^10.9.1",
         "typedoc": "^0.25.13",
-        "typescript": "^5.0.4",
+        "typescript": "^5.1.6",
         "webpack": "5.94.0",
         "webpack-cli": "4.7.2"
     }

package/scripts/docker-build.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+/**
+ * Script to build Docker image with detected Playwright version
+ */
+
+const { execSync } = require('child_process');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function buildDockerImage() {
+    try {
+        const version = getPlaywrightVersion();
+        console.log(`Building Docker image with Playwright version: ${version}`);
+
+        // Use the detected version or fallback to latest
+        // Add 'v' prefix for version numbers, but not for 'latest'
+        const dockerVersion = version === 'latest' ? 'latest' : `v${version}`;
+
+        const buildCommand = `docker build --build-arg PLAYWRIGHT_VERSION=${dockerVersion} -t mynah-ui-e2e .`;
+
+        console.log(`Executing: ${buildCommand}`);
+        execSync(buildCommand, { stdio: 'inherit' });
+
+        console.log('Docker image built successfully!');
+    } catch (error) {
+        console.error('Error building Docker image:', error.message);
+        process.exit(1);
+    }
+}
+
+// If called directly, run the build
+if (require.main === module) {
+    buildDockerImage();
+}
+
+module.exports = { buildDockerImage };

package/scripts/docker-health-check.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+/**
+ * Docker health check script to verify browser installations
+ */
+
+const { execSync } = require('child_process');
+
+function healthCheck() {
+    try {
+        console.log('=== Docker Health Check ===');
+
+        // Check if we're in Docker
+        console.log('Environment: Docker Container');
+
+        // Check Playwright installation
+        console.log('\n1. Checking Playwright...');
+        execSync('npx playwright --version', { stdio: 'inherit' });
+
+        // Check browser installations
+        console.log('\n2. Checking browsers...');
+        execSync('npx playwright install --dry-run', { stdio: 'inherit' });
+
+        // Test WebKit specifically
+        console.log('\n3. Testing WebKit launch...');
+        execSync('npx playwright test --list --project=webkit | head -5', {
+            stdio: 'inherit',
+            shell: true,
+        });
+
+        console.log('\n=== Health Check Passed ===');
+        return true;
+    } catch (error) {
+        console.error('Health check failed:', error.message);
+        return false;
+    }
+}
+
+// If called directly, run the health check
+if (require.main === module) {
+    const success = healthCheck();
+    process.exit(success ? 0 : 1);
+}
+
+module.exports = { healthCheck };

package/scripts/get-playwright-version.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+/**
+ * Script to detect and return the appropriate Playwright version
+ * Priority: local installation > package.json > latest
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+function getPlaywrightVersion() {
+    try {
+        // 1. Try to get locally installed version
+        try {
+            const localVersion = execSync('playwright --version', { encoding: 'utf8', stdio: 'pipe' });
+            const versionMatch = localVersion.match(/Version (\d+\.\d+\.\d+)/);
+            if (versionMatch) {
+                console.log(`Found local Playwright version: ${versionMatch[1]}`);
+                return versionMatch[1];
+            }
+        } catch (error) {
+            console.log('No local Playwright installation found');
+        }
+
+        // 2. Try to get version from ui-tests package.json
+        const uiTestsPackagePath = path.join(__dirname, '../ui-tests/package.json');
+        if (fs.existsSync(uiTestsPackagePath)) {
+            const packageJson = JSON.parse(fs.readFileSync(uiTestsPackagePath, 'utf8'));
+
+            // Check both playwright and @playwright/test dependencies
+            const playwrightVersion = packageJson.devDependencies?.playwright || packageJson.dependencies?.playwright;
+            const playwrightTestVersion =
+                packageJson.devDependencies?.['@playwright/test'] || packageJson.dependencies?.['@playwright/test'];
+
+            // Prefer @playwright/test version if available, otherwise use playwright
+            const version = playwrightTestVersion || playwrightVersion;
+
+            if (version) {
+                // Remove ^ or ~ prefix and get clean version
+                const cleanVersion = version.replace(/[\^~]/, '');
+                const sourcePackage = playwrightTestVersion ? '@playwright/test' : 'playwright';
+                console.log(`Found ${sourcePackage} version in ui-tests package.json: ${cleanVersion}`);
+                return cleanVersion;
+            }
+        }
+
+        // 3. Fallback to latest
+        console.log('No specific version found, using latest');
+        return 'latest';
+    } catch (error) {
+        console.error('Error detecting Playwright version:', error.message);
+        return 'latest';
+    }
+}
+
+// If called directly, output the version
+if (require.main === module) {
+    console.log(getPlaywrightVersion());
+}
+
+module.exports = { getPlaywrightVersion };

package/scripts/pre-test-setup.js

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+
+/**
+ * Pre-test setup script that ensures Playwright is properly configured
+ * This runs before tests to guarantee version consistency
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function checkPlaywrightInstallation() {
+    const uiTestsPath = path.join(__dirname, '../ui-tests');
+    const nodeModulesPath = path.join(uiTestsPath, 'node_modules');
+    const playwrightPath = path.join(nodeModulesPath, '@playwright');
+
+    return fs.existsSync(playwrightPath);
+}
+
+function getInstalledPlaywrightVersion() {
+    try {
+        const uiTestsPath = path.join(__dirname, '../ui-tests');
+        const packageLockPath = path.join(uiTestsPath, 'package-lock.json');
+
+        if (fs.existsSync(packageLockPath)) {
+            const packageLock = JSON.parse(fs.readFileSync(packageLockPath, 'utf8'));
+            return (
+                packageLock.packages?.['node_modules/@playwright/test']?.version ||
+                packageLock.packages?.['node_modules/playwright']?.version ||
+                null
+            );
+        }
+        return null;
+    } catch (error) {
+        console.warn('Could not read package-lock.json:', error.message);
+        return null;
+    }
+}
+
+function preTestSetup() {
+    console.log('🔍 Running pre-test setup...');
+
+    try {
+        const expectedVersion = getPlaywrightVersion();
+        console.log(`📋 Expected Playwright version: ${expectedVersion}`);
+
+        const isInstalled = checkPlaywrightInstallation();
+        const installedVersion = getInstalledPlaywrightVersion();
+
+        console.log(`📦 Playwright installed: ${isInstalled}`);
+        console.log(`📦 Installed version: ${installedVersion || 'unknown'}`);
+
+        // Check if we need to install/update
+        const needsSetup = !isInstalled || (expectedVersion !== 'latest' && installedVersion !== expectedVersion);
+
+        if (needsSetup) {
+            console.log('🔧 Setting up Playwright...');
+
+            // Run setup with target directory
+            const { setupPlaywright } = require('./setup-playwright');
+            const uiTestsPath = path.join(__dirname, '../ui-tests');
+            setupPlaywright(uiTestsPath);
+        } else {
+            console.log('✅ Playwright is already properly configured');
+        }
+
+        console.log('🎉 Pre-test setup completed successfully!');
+    } catch (error) {
+        console.error('❌ Pre-test setup failed:', error.message);
+        process.exit(1);
+    }
+}
+
+// If called directly, run the setup
+if (require.main === module) {
+    preTestSetup();
+}
+
+module.exports = { preTestSetup };

package/scripts/setup-playwright.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+/**
+ * Script to setup Playwright with version-agnostic approach
+ * This ensures consistent versions across local and Docker environments
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function setupPlaywright(targetDir = null) {
+    try {
+        const version = getPlaywrightVersion();
+        console.log(`Setting up Playwright version: ${version}`);
+
+        // Determine target directory
+        const uiTestsPath = targetDir || path.join(__dirname, '../ui-tests');
+
+        // Ensure target directory exists
+        if (!fs.existsSync(uiTestsPath)) {
+            throw new Error(`Target directory does not exist: ${uiTestsPath}`);
+        }
+
+        const installCommand =
+            version === 'latest'
+                ? 'npm install @playwright/test@latest playwright@latest --save-dev'
+                : `npm install @playwright/test@${version} playwright@${version} --save-dev`;
+
+        console.log(`Installing Playwright in ${uiTestsPath}...`);
+        execSync(installCommand, {
+            stdio: 'inherit',
+            cwd: uiTestsPath,
+        });
+
+        // Install Playwright browsers with dependencies
+        console.log('Installing Playwright browsers with dependencies...');
+        execSync('npx playwright install --with-deps', {
+            stdio: 'inherit',
+            cwd: uiTestsPath,
+        });
+
+        console.log('Playwright setup completed successfully!');
+        return true;
+    } catch (error) {
+        console.error('Error setting up Playwright:', error.message);
+        throw error; // Re-throw to allow caller to handle
+    }
+}
+
+// If called directly, run the setup
+if (require.main === module) {
+    try {
+        setupPlaywright();
+    } catch (error) {
+        process.exit(1);
+    }
+}
+
+module.exports = { setupPlaywright };

package/scripts/test-webkit.js

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+/**
+ * Script to test WebKit browser availability and functionality
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+
+function testWebKit() {
+    try {
+        console.log('Testing WebKit browser availability...');
+
+        const uiTestsPath = path.join(__dirname, '../ui-tests');
+
+        // Check if WebKit is installed
+        console.log('Checking WebKit installation...');
+        execSync('npx playwright install webkit --with-deps', {
+            stdio: 'inherit',
+            cwd: uiTestsPath,
+        });
+
+        // Run a simple WebKit test
+        console.log('Running WebKit test...');
+        execSync('npx playwright test --project=webkit --grep "should render initial data"', {
+            stdio: 'inherit',
+            cwd: uiTestsPath,
+        });
+
+        console.log('WebKit test completed successfully!');
+        return true;
+    } catch (error) {
+        console.error('WebKit test failed:', error.message);
+        return false;
+    }
+}
+
+// If called directly, run the test
+if (require.main === module) {
+    const success = testWebKit();
+    process.exit(success ? 0 : 1);
+}
+
+module.exports = { testWebKit };