Fix UI tests

Author: brichet

packages/agent/src/agent.ts

@@ -576,7 +576,9 @@ export class AgentManager implements IAgentManager {
       }
 
       if (!this._agent) {
-        throw new Error('Failed to initialize agent');
+        throw new Error(
+          'Failed to initialize agent.\nPlease configure your AI settings first. Open the AI Settings to set your API key and model.'
+        );
       }
 
       let continueLoop = true;

packages/ai/schema/chat.json

@@ -1,6 +1,6 @@
 {
   "jupyter.lab.shortcuts": [],
-  "title": "JupyterLite AI Chat",
+  "title": "AI Chat",
   "jupyter.lab.setting-icon": "@jupyternaut/agent:jupyternaut",
   "description": "Configuration for JupyterLite AI chat behavior",
   "type": "object",

packages/ai/src/chat-model.ts

@@ -17,15 +17,17 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
 import { Contents } from '@jupyterlab/services';
 
-import { AI_AVATAR } from '@jupyternaut/agent';
-
 import type {
   IAgentManager,
   IAISettingsModel,
   ITokenUsage
 } from '@jupyternaut/agent';
 
-import { IPersona, IPersonaRegistry } from '@jupyternaut/persona';
+import {
+  DEFAULT_PERSONA,
+  IPersona,
+  IPersonaRegistry
+} from '@jupyternaut/persona';
 
 import type { ModelMessage } from 'ai';
 
@@ -312,15 +314,6 @@ export class AIChatModel extends AbstractChatModel implements IAIChatModel {
     // Check if we have valid configuration
     if (!this.agentManager?.hasValidConfig()) {
       this.messageAdded(userMessage);
-      const errorMessage: IMessageContent = {
-        body: 'Please configure your AI settings first. Open the AI Settings to set your API key and model.',
-        sender: this._getAIUser(),
-        id: UUID.uuid4(),
-        time: Date.now() / 1000,
-        type: 'msg',
-        raw_time: false
-      };
-      this.messageAdded(errorMessage);
       return;
     }
 
@@ -656,13 +649,7 @@ export class AIChatModel extends AbstractChatModel implements IAIChatModel {
    * Gets the AI user information for system messages.
    */
   private _getAIUser(): IUser {
-    return {
-      username: 'ai-assistant',
-      display_name: 'Jupyternaut',
-      initials: 'JN',
-      color: '#2196F3',
-      avatar_url: AI_AVATAR
-    };
+    return DEFAULT_PERSONA;
   }
 
   /**

ui-tests/tests/chat-panel.spec.ts

@@ -9,7 +9,8 @@ import {
   CHAT_PANEL_ID,
   CHAT_PANEL_TITLE,
   TEST_PROVIDERS,
-  openChatPanel
+  openChatPanel,
+  openSettings
 } from './test-utils';
 
 const NOT_CONFIGURED_TEXT = 'Please configure your AI settings first';
@@ -232,12 +233,22 @@ TEST_PROVIDERS.forEach(({ name, settings }) =>
     }) => {
       const panel = await openChatPanel(page);
 
-      await panel.getByTitle('Open AI Settings').click();
-
-      const aiSettingsWidget = page.locator('#jupyternaut-persona-settings');
-      await expect(aiSettingsWidget).toBeVisible();
-      await aiSettingsWidget.getByRole('tab', { name: 'Behavior' }).click();
-      await aiSettingsWidget.getByLabel('Show Context Usage').click();
+      const settings = await openSettings(page);
+      await settings
+        ?.getByRole('checkbox', {
+          name: 'Show Context Usage'
+        })
+        .check();
+
+      // wait for the settings to be saved
+      await expect(page.activity.getTabLocator('Settings')).toHaveAttribute(
+        'class',
+        /jp-mod-dirty/
+      );
+      await expect(page.activity.getTabLocator('Settings')).not.toHaveAttribute(
+        'class',
+        /jp-mod-dirty/
+      );
 
       await expect(
         panel.getByTitle(/Context Usage unavailable\./)

ui-tests/tests/chat-save-restore.spec.ts

@@ -7,7 +7,8 @@ import { expect, galata, test } from '@jupyterlab/galata';
 import {
   DEFAULT_GENERIC_PROVIDER_SETTINGS,
   QWEN_MODEL_NAME,
-  openChatPanel
+  openChatPanel,
+  openSettings
 } from './test-utils';
 
 const BACKUP_FILE = `${QWEN_MODEL_NAME}.chat`;
@@ -169,20 +170,21 @@ test.describe('#chatSaveRestore', () => {
     const panel = await openChatPanel(page);
 
     // Update the backup directory in settings
-    const settingsButton = panel.getByTitle('Open AI Settings');
-    await settingsButton.click();
-    const aiSettingsWidget = page.locator('#jupyternaut-persona-settings');
-    await expect(aiSettingsWidget).toBeVisible();
-    await aiSettingsWidget.getByText('BEHAVIOR').click();
-
-    const backupDirectoryInput = aiSettingsWidget.getByLabel(
-      'Chat Backup Directory'
+    const settings = await openSettings(page);
+    const defaultDirectory = settings.locator(
+      'input[label="Chat Backup Directory"]'
+    );
+    await defaultDirectory.pressSequentially(customDir, { delay: 100 });
+
+    // wait for the settings to be saved
+    await expect(page.activity.getTabLocator('Settings')).toHaveAttribute(
+      'class',
+      /jp-mod-dirty/
+    );
+    await expect(page.activity.getTabLocator('Settings')).not.toHaveAttribute(
+      'class',
+      /jp-mod-dirty/
     );
-    // Sometime clear method does nothing on MUI input.
-    while (await backupDirectoryInput.inputValue()) {
-      await backupDirectoryInput.clear();
-    }
-    await backupDirectoryInput.pressSequentially(customDir, { delay: 100 });
 
     // Send a message
     const input = panel

ui-tests/tests/test-utils.ts

@@ -30,11 +30,11 @@ export const DEFAULT_GENERIC_PROVIDER_SETTINGS = {
       }
     ],
     toolsEnabled: false,
-    useSameProviderForChatAndCompleter: true
+    useSameProviderForChatAndCompleter: true,
+    useSecretsManager: false
   },
   '@jupyterlite/ai:chat': {
-    showTokenUsage: false,
-    useSecretsManager: false
+    showTokenUsage: false
   }
 };
 
@@ -57,3 +57,23 @@ export async function openChatPanel(
   }
   return panel;
 }
+
+export const openSettings = async (
+  page: IJupyterLabPageFixture,
+  globalSettings?: boolean
+): Promise<Locator> => {
+  const args = globalSettings ? {} : { query: 'AI Chat' };
+  await page.evaluate(async args => {
+    await window.jupyterapp.commands.execute('settingeditor:open', args);
+  }, args);
+
+  // Activate the settings tab, sometimes it does not automatically.
+  const settingsTab = page
+    .getByRole('main')
+    .getByRole('tab', { name: 'Settings', exact: true });
+  await settingsTab.click();
+  await page.waitForCondition(
+    async () => (await settingsTab.getAttribute('aria-selected')) === 'true'
+  );
+  return (await page.activity.getPanelLocator('Settings')) as Locator;
+};