AIChat: fix optionChanged to cover object values

Author: anna-shakhova

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view.test.ts

@@ -290,9 +290,11 @@ describe('AIAssistantView', () => {
     });
 
     it('should call hide when aiAssistant.enabled changes to false', () => {
-      const { aiAssistantView } = createAIAssistantView();
+      const { aiAssistantView, setEnabled } = createAIAssistantView();
       const hideSpy = jest.spyOn(aiAssistantView, 'hide');
 
+      setEnabled(false);
+
       aiAssistantView.optionChanged({
         name: 'aiAssistant' as const,
         fullName: 'aiAssistant.enabled' as const,
@@ -304,7 +306,7 @@ describe('AIAssistantView', () => {
       expect(hideSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('should call updateOptions on aiChatInstance for non-enabled sub-options', () => {
+    it('should call updateOptions on aiChatInstance for title change', () => {
       const { aiAssistantView } = createAIAssistantView();
 
       const aiChatInstance = (AIChat as jest.Mock)
@@ -319,6 +321,55 @@ describe('AIAssistantView', () => {
       });
 
       expect(aiChatInstance.updateOptions).toHaveBeenCalledTimes(1);
+      expect(aiChatInstance.updateOptions).toHaveBeenCalledWith(
+        expect.any(Object),
+        true,
+        false,
+      );
+    });
+
+    it('should call updateOptions on aiChatInstance for chat options change', () => {
+      const { aiAssistantView } = createAIAssistantView();
+
+      const aiChatInstance = (AIChat as jest.Mock)
+        .mock.results[0].value as { updateOptions: jest.Mock };
+
+      aiAssistantView.optionChanged({
+        name: 'aiAssistant' as const,
+        fullName: 'aiAssistant.chat' as const,
+        value: { speechToTextEnabled: false },
+        previousValue: {},
+        handled: false,
+      });
+
+      expect(aiChatInstance.updateOptions).toHaveBeenCalledTimes(1);
+      expect(aiChatInstance.updateOptions).toHaveBeenCalledWith(
+        expect.any(Object),
+        false,
+        true,
+      );
+    });
+
+    it('should call updateOptions with both flags when object value contains title and chat', () => {
+      const { aiAssistantView } = createAIAssistantView();
+
+      const aiChatInstance = (AIChat as jest.Mock)
+        .mock.results[0].value as { updateOptions: jest.Mock };
+
+      aiAssistantView.optionChanged({
+        name: 'aiAssistant' as const,
+        fullName: 'aiAssistant' as const,
+        value: { title: 'New title', chat: { speechToTextEnabled: false } },
+        previousValue: { title: 'Old title' },
+        handled: false,
+      });
+
+      expect(aiChatInstance.updateOptions).toHaveBeenCalledTimes(1);
+      expect(aiChatInstance.updateOptions).toHaveBeenCalledWith(
+        expect.any(Object),
+        true,
+        true,
+      );
     });
 
     it('should not throw when aiChatInstance is not created for non-enabled sub-options', () => {

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view_controller.test.ts

@@ -126,6 +126,15 @@ describe('AIAssistantViewController', () => {
       expect(mockView.visibilityChanged.remove).toHaveBeenCalledWith(expect.any(Function));
       expect(removeOrder).toBeLessThan(addOrder);
     });
+
+    it('should use the same handler reference for remove and add', () => {
+      const { mockView } = createAIAssistantViewController();
+
+      const removedHandler = mockView.visibilityChanged.remove.mock.calls[0][0];
+      const addedHandler = mockView.visibilityChanged.add.mock.calls[0][0];
+
+      expect(removedHandler).toBe(addedHandler);
+    });
   });
 
   describe('optionChanged', () => {
@@ -210,5 +219,59 @@ describe('AIAssistantViewController', () => {
 
       expect(mockHeaderPanel.applyToolbarItem).toHaveBeenCalledTimes(1);
     });
+
+    it('should set handled to true when object value contains enabled', () => {
+      const options: Record<string, unknown> = { 'aiAssistant.enabled': false };
+      const { controller, mockHeaderPanel } = createAIAssistantViewController(options);
+
+      options['aiAssistant.enabled'] = true;
+
+      const args = {
+        name: 'aiAssistant' as const,
+        fullName: 'aiAssistant' as const,
+        value: { enabled: true },
+        previousValue: { enabled: false },
+        handled: false,
+      };
+
+      controller.optionChanged(args);
+
+      expect(args.handled).toBe(true);
+      expect(mockHeaderPanel.applyToolbarItem).toHaveBeenCalledTimes(1);
+    });
+
+    it('should set handled to true when object value contains title', () => {
+      const options: Record<string, unknown> = { 'aiAssistant.enabled': true };
+      const { controller, mockHeaderPanel } = createAIAssistantViewController(options);
+
+      const args = {
+        name: 'aiAssistant' as const,
+        fullName: 'aiAssistant' as const,
+        value: { title: 'New title', chat: { speechToTextEnabled: false } },
+        previousValue: { title: 'Old title' },
+        handled: false,
+      };
+
+      controller.optionChanged(args);
+
+      expect(args.handled).toBe(true);
+      expect(mockHeaderPanel.applyToolbarItem).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not set handled when object value contains only chat/popup options', () => {
+      const { controller } = createAIAssistantViewController();
+
+      const args = {
+        name: 'aiAssistant' as const,
+        fullName: 'aiAssistant' as const,
+        value: { chat: { speechToTextEnabled: false, showMessageTimestamp: true } },
+        previousValue: {},
+        handled: false,
+      };
+
+      controller.optionChanged(args);
+
+      expect(args.handled).toBe(false);
+    });
   });
 });

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/utils.test.ts

@@ -0,0 +1,88 @@
+import {
+  describe, expect, it,
+} from '@jest/globals';
+
+import {
+  isChatOptions,
+  isEnabledOption,
+  isPopupOptions,
+  isTitleOption,
+} from '../utils';
+
+describe('isEnabledOption', () => {
+  it('should return true for enabled option names', () => {
+    expect(isEnabledOption('aiAssistant.enabled', true)).toBe(true);
+    expect(isEnabledOption('aiAssistant', {
+      enabled: false,
+      title: 'AI Assistant',
+    })).toBe(true);
+  });
+
+  it('should return false for non-enabled option names', () => {
+    expect(isEnabledOption('aiAssistant.title', 'Title')).toBe(false);
+    expect(isEnabledOption('aiAssistant.popup', {})).toBe(false);
+    expect(isEnabledOption('aiAssistant', { title: 'Title' })).toBe(false);
+    expect(isEnabledOption('aiAssistant', 'string')).toBe(false);
+  });
+});
+
+describe('isTitleOption', () => {
+  it('should return true for title option names', () => {
+    expect(isTitleOption('aiAssistant.title', 'New Title')).toBe(true);
+    expect(isTitleOption('aiAssistant', {
+      title: 'New Title',
+      chat: { speechToTextEnabled: false },
+    })).toBe(true);
+  });
+
+  it('should return false for non-title option names', () => {
+    expect(isTitleOption('aiAssistant.enabled', true)).toBe(false);
+    expect(isTitleOption('aiAssistant.chat', {})).toBe(false);
+    expect(isTitleOption('aiAssistant', { enabled: true })).toBe(false);
+    expect(isTitleOption('aiAssistant', 'string')).toBe(false);
+  });
+});
+
+describe('isPopupOptions', () => {
+  it('should return true for popup option names', () => {
+    expect(isPopupOptions('aiAssistant.popup', {})).toBe(true);
+    expect(isPopupOptions('aiAssistant.popup.width', 400)).toBe(true);
+    expect(isPopupOptions('aiAssistant', { popup: { width: 400 } })).toBe(true);
+    expect(isPopupOptions('aiAssistant', {
+      popup: { width: 400 },
+      title: 'AI Assistant',
+    })).toBe(true);
+  });
+
+  it('should return false for non-popup option names', () => {
+    expect(isPopupOptions('aiAssistant.chat', {})).toBe(false);
+    expect(isPopupOptions('aiAssistant.enabled', true)).toBe(false);
+    expect(isPopupOptions('aiAssistant', { chat: {} })).toBe(false);
+    expect(isPopupOptions('aiAssistant', {
+      chat: { showAvatar: false },
+      title: 'AI Assistant',
+    })).toBe(false);
+  });
+});
+
+describe('isChatOptions', () => {
+  it('should return true for chat option names', () => {
+    expect(isChatOptions('aiAssistant.chat', {})).toBe(true);
+    expect(isChatOptions('aiAssistant.chat.showAvatar', false)).toBe(true);
+    expect(isChatOptions('aiAssistant', { chat: { showAvatar: false } })).toBe(true);
+    expect(isChatOptions('aiAssistant', {
+      chat: { speechToTextEnabled: false },
+      title: 'AI Assistant',
+    })).toBe(true);
+  });
+
+  it('should return false for non-chat option names', () => {
+    expect(isChatOptions('aiAssistant.popup', {})).toBe(false);
+    expect(isChatOptions('aiAssistant.enabled', true)).toBe(false);
+    expect(isChatOptions('aiAssistant', { popup: {} })).toBe(false);
+    expect(isChatOptions('aiAssistant', {
+      popup: { width: 400 },
+      title: 'AI Assistant',
+    })).toBe(false);
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view.ts

@@ -6,6 +6,12 @@ import { isString } from '@js/core/utils/type';
 import type { Message, Properties as ChatProperties } from '@js/ui/chat';
 import type { Properties as PopupProperties } from '@js/ui/popup';
 import { AI_ASSISTANT_POPUP_OFFSET } from '@ts/grids/grid_core/ai_assistant/const';
+import {
+  isChatOptions,
+  isEnabledOption,
+  isPopupOptions,
+  isTitleOption,
+} from '@ts/grids/grid_core/ai_assistant/utils';
 import type { ColumnHeadersView } from '@ts/grids/grid_core/column_headers/m_column_headers';
 import type { OptionChanged } from '@ts/grids/grid_core/m_types';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
@@ -110,19 +116,29 @@ export class AIAssistantView extends View {
 
   public optionChanged(args: OptionChanged): void {
     if (args.name === 'aiAssistant') {
-      const [, secondLevel] = args.fullName.split('.');
-      switch (secondLevel) {
-        case 'enabled':
-          if (args.value) {
-            this?._invalidate();
-          } else {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this?.hide();
-          }
-          break;
-        default:
-          this.aiChatInstance?.updateOptions(this.getAIChatConfig());
+      const enabledChanged = isEnabledOption(args.fullName, args.value);
+
+      if (enabledChanged) {
+        if (this.isVisible()) {
+          this._invalidate();
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          this.hide();
+        }
       }
+
+      const popupOptionsChanged = isTitleOption(args.fullName, args.value)
+        || isPopupOptions(args.fullName, args.value);
+      const chatOptionsChanged = isChatOptions(args.fullName, args.value);
+
+      if (popupOptionsChanged || chatOptionsChanged) {
+        this.aiChatInstance?.updateOptions(
+          this.getAIChatConfig(),
+          popupOptionsChanged,
+          chatOptionsChanged,
+        );
+      }
+
       args.handled = true;
     } else {
       super.optionChanged(args);

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view_controller.ts

@@ -11,17 +11,19 @@ import type { ToolbarItem } from '@ts/grids/new/grid_core/toolbar/types';
 
 import { ViewController } from '../m_modules';
 import type { AIAssistantView } from './ai_assistant_view';
+import { isEnabledOption, isTitleOption } from './utils';
 
 export class AIAssistantViewController extends ViewController {
   private aiAssistantView?: AIAssistantView;
 
   private headerPanel?: HeaderPanel;
 
-  private getAiAssistantButton(): dxElementWrapper | undefined {
+  private readonly visibilityChangedHandler = (visible: boolean): void => {
     const className = this.addWidgetPrefix(CLASSES.aiAssistantButton);
+    const aiAssistantButton: dxElementWrapper | undefined = this.headerPanel?.element()?.find(`.${className}`);
 
-    return this.headerPanel?.element()?.find(`.${className}`) as dxElementWrapper | undefined;
-  }
+    aiAssistantButton?.toggleClass(ACTIVE_STATE_CLASS, visible);
+  };
 
   public init(): void {
     this.aiAssistantView = this.getView('aiAssistantView');
@@ -35,17 +37,16 @@ export class AIAssistantViewController extends ViewController {
       this.headerPanel?.registerToolbarItem(AI_ASSISTANT_BUTTON_NAME, aiAssistantToolbarItem);
     }
 
-    const visibilityChangedHandler = (visible: boolean): void => {
-      this.getAiAssistantButton()?.toggleClass(ACTIVE_STATE_CLASS, visible);
-    };
-
-    this.aiAssistantView?.visibilityChanged?.remove(visibilityChangedHandler);
-    this.aiAssistantView.visibilityChanged?.add(visibilityChangedHandler);
+    this.aiAssistantView?.visibilityChanged?.remove(this.visibilityChangedHandler);
+    this.aiAssistantView?.visibilityChanged?.add(this.visibilityChangedHandler);
   }
 
   public optionChanged(args: OptionChanged): void {
     if (args.name === 'aiAssistant') {
-      if (args.fullName === 'aiAssistant.enabled' || args.fullName === 'aiAssistant.title') {
+      const enabledChanged = isEnabledOption(args.fullName, args.value);
+      const titleChanged = isTitleOption(args.fullName, args.value);
+
+      if (enabledChanged || titleChanged) {
         this.syncAiAssistantItem();
         args.handled = true;
       }
@@ -79,7 +80,7 @@ export class AIAssistantViewController extends ViewController {
 
     const aiAssistantToolbarItemClass = this.headerPanel?.getToolbarButtonClass(
       this.addWidgetPrefix(CLASSES.aiAssistantButton),
-    );
+    ) ?? '';
     const aiAssistantToolbarItemStateClass = isActive ? ACTIVE_STATE_CLASS : '';
 
     return {

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/utils.ts

@@ -0,0 +1,13 @@
+import { isObject } from '@js/core/utils/type';
+
+export const isEnabledOption = (optionName: string, value: unknown): boolean => optionName.startsWith('aiAssistant.enabled')
+  || (optionName === 'aiAssistant' && isObject(value) && 'enabled' in value);
+
+export const isTitleOption = (optionName: string, value: unknown): boolean => optionName.startsWith('aiAssistant.title')
+  || (optionName === 'aiAssistant' && isObject(value) && 'title' in value);
+
+export const isPopupOptions = (optionName: string, value: unknown): boolean => optionName.startsWith('aiAssistant.popup')
+  || (optionName === 'aiAssistant' && isObject(value) && 'popup' in value);
+
+export const isChatOptions = (optionName: string, value: unknown): boolean => optionName.startsWith('aiAssistant.chat')
+  || (optionName === 'aiAssistant' && isObject(value) && 'chat' in value);