@progress/kendo-angular-grid 21.0.0-develop.9 → 21.0.1-develop.1

package/esm2022/rendering/toolbar/tools/ai-assistant/ai-assistant.component.mjs

@@ -2,14 +2,17 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, NgZone } from '@angular/core';
 import { AIPromptComponent, OutputViewComponent, PromptViewComponent, AIPromptCustomMessagesComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective } from '@progress/kendo-angular-conversational-ui';
 import { HttpClient, HttpRequest } from '@angular/common/http';
 import { ContextService } from './../../../../common/provider.service';
 import { ColumnInfoService } from './../../../../common/column-info.service';
-import { GridToolbarAIResponseSuccessEvent, GridToolbarAIResponseErrorEvent } from './models';
+import { GridAIAssistantResponseSuccessEvent, GridAIAssistantResponseErrorEvent } from './models';
 import { NgIf } from '@angular/common';
 import { convertDateStringsInFilter, highlightBy } from './utils';
+import { isCheckboxColumn } from '../../../../columns/column-base';
+import { CommandColumnComponent } from '../../../../columns/command-column.component';
+import { isPresent } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common/http";
 import * as i2 from "./../../../../common/provider.service";
@@ -21,6 +24,7 @@ export class AiAssistantComponent {
     http;
     ctx;
     columnInfoService;
+    zone;
     aiPrompt;
     activeView = 0;
     requestUrl;
@@ -34,15 +38,49 @@ export class AiAssistantComponent {
     currentRequestSubscription = null;
     //Remove this when the AI Assistant has a built-in loading indicator
     loadingOutput = { id: 'k-loading-item', output: '', prompt: '' };
+    // flat columns used for highlight utilities (expects { field })
     columns = [];
+    leafColumns = [];
+    // nested tree representing the actual Grid column components sent to the AI service
+    columnsTree = [];
     idCounter = 0;
-    constructor(http, ctx, columnInfoService) {
+    constructor(http, ctx, columnInfoService, zone) {
         this.http = http;
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
+        this.zone = zone;
     }
     ngAfterViewInit() {
-        this.columns = this.columnInfoService.leafNamedColumns.map((col) => ({ field: col.field }));
+        // Build a nested GridColumnDescriptor tree based on the actual Grid columns structure.
+        // This includes root columns and their nested children (for ColumnGroup and SpanColumn).
+        const rootColumns = this.ctx?.grid?.columnList?.rootColumns() || [];
+        const buildDescriptor = (col) => {
+            const hasChildren = Boolean(col.hasChildren && col.childrenArray?.length);
+            const descriptor = {
+                id: col.id,
+                field: col.field
+            };
+            if (hasChildren) {
+                descriptor.header = col.displayTitle;
+                descriptor.columns = col.childrenArray.map((c) => buildDescriptor(c));
+            }
+            // For special columns that don't have a field, emit an optional type token
+            // so the AI service knows how to treat them (checkbox/command/reorder)
+            if (!col.field) {
+                if (isCheckboxColumn(col)) {
+                    descriptor.type = 'checkbox';
+                }
+                else if (col instanceof CommandColumnComponent) {
+                    descriptor.type = 'command';
+                }
+            }
+            return descriptor;
+        };
+        this.columnsTree = rootColumns.map((col) => buildDescriptor(col));
+        // Preserve a flat columns array (fields) for highlight utilities.
+        // Use leafNamedColumns as the canonical list of leaf columns with display titles.
+        this.leafColumns = this.columnInfoService.leafNamedColumns || [];
+        this.columns = this.leafColumns.map((col) => ({ field: col.field }));
     }
     ngOnDestroy() {
         this.unsubscribeCurrentRequest();
@@ -66,7 +104,8 @@ export class AiAssistantComponent {
             this.lastMessage = ev.prompt;
         }
         this.requestData = {
-            columns: this.columns,
+            // send nested tree to AI service
+            columns: this.columnsTree,
             promptMessage: ev.prompt,
             url: this.requestUrl,
             requestOptions: {
@@ -110,30 +149,22 @@ export class AiAssistantComponent {
             this.aiToolDirective.emitOpenClose = true;
             this.aiToolDirective.toggleWindow();
         }
-        const responseBody = response.body;
-        const responseSuccessEvent = new GridToolbarAIResponseSuccessEvent(response);
+        const responseBody = response.body || { commands: [] };
+        const responseSuccessEvent = new GridAIAssistantResponseSuccessEvent(response);
         this.aiToolDirective.responseSuccess.emit(responseSuccessEvent);
         if (responseSuccessEvent.isDefaultPrevented()) {
             this.deleteLoadingOutput();
             return;
         }
-        const isFilterable = Boolean(this.ctx.grid.filterable);
-        const isSortable = Boolean(this.ctx.grid.sortable);
-        const isGroupable = Boolean(this.ctx.grid.groupable);
-        if (isFilterable && responseBody.filter) {
-            this.processFilterResponse(responseBody.filter);
-        }
-        if (isSortable && responseBody.sort) {
-            this.processArrayResponse(responseBody.sort, this.ctx.grid.currentState.sort || [], (item) => item.field, (mergedArray) => this.ctx.grid.sortChange.next(mergedArray));
-        }
-        if (isGroupable && responseBody.group) {
-            this.processArrayResponse(responseBody.group, this.ctx.grid.currentState.group || [], (item) => item.field, (mergedArray) => this.ctx.grid.groupChange.next(mergedArray));
-        }
-        if (this.ctx.highlightDirective && responseBody.highlight) {
-            this.processHighlightResponse(responseBody.highlight);
+        const messages = [];
+        // Include optional top-level message from the response
+        if (responseBody.message) {
+            messages.push(responseBody.message);
         }
+        // Execute received commands sequentially and collect messages.
+        this.processCommands(responseBody.commands || [], messages);
         const responseContentStart = [`${this.ctx.localization.get('aiAssistantOutputCardBodyContent')} \n`];
-        const responseContentBody = responseBody.messages
+        const responseContentBody = messages
             .map((output, idx) => `${idx + 1} ${output}`)
             .join('\n');
         const output = {
@@ -146,7 +177,7 @@ export class AiAssistantComponent {
         this.aiToolDirective.promptOutputs.unshift(output);
     }
     handleError(error) {
-        const responseErrorEvent = new GridToolbarAIResponseErrorEvent(error);
+        const responseErrorEvent = new GridAIAssistantResponseErrorEvent(error);
         this.aiToolDirective.responseError.emit(responseErrorEvent);
         if (responseErrorEvent.isDefaultPrevented()) {
             this.deleteLoadingOutput();
@@ -183,12 +214,468 @@ export class AiAssistantComponent {
             updateGrid(mergedArray);
         }
     }
-    processHighlightResponse(highlight) {
-        if (highlight.length === 0) {
-            this.ctx.highlightDirective['setState']([]);
+    processCommands(commands, messages) {
+        if (!commands?.length) {
             return;
         }
-        const highlightedItems = highlightBy(this.ctx.dataBindingDirective['originalData'], highlight, this.columns);
+        const isFilterable = Boolean(this.ctx.grid.filterable);
+        const isSortable = Boolean(this.ctx.grid.sortable);
+        const isGroupable = Boolean(this.ctx.grid.groupable);
+        const findColumnById = (id) => this.ctx.grid.columnList.toArray().find((c) => c.id === id);
+        const updateColumnHierarchy = (column, updater) => {
+            const changed = [];
+            const queue = [column];
+            while (queue.length) {
+                const current = queue.shift();
+                if (!current) {
+                    continue;
+                }
+                const didChange = updater(current);
+                if (didChange) {
+                    changed.push(current);
+                }
+                if (current.hasChildren && current.childrenArray?.length) {
+                    queue.push(...current.childrenArray);
+                }
+            }
+            return changed;
+        };
+        commands.forEach((cmd) => {
+            let displayMessage = cmd.message || '';
+            if (this.isColumnCommand(cmd.type)) {
+                if (cmd.id) {
+                    const column = findColumnById(cmd.id);
+                    const replacement = this.getColumnReplacement(column);
+                    displayMessage = this.replaceQuotedColumnId(displayMessage, replacement);
+                }
+            }
+            messages.push(displayMessage);
+            switch (cmd.type) {
+                case 'GridSort':
+                    if (!isSortable) {
+                        break;
+                    }
+                    // cmd.sort is a SortDescriptor - replace or merge with existing sort
+                    this.processArrayResponse([cmd.sort], this.ctx.grid.currentState.sort || [], (item) => item.field, (mergedArray) => this.ctx.grid.sortChange.next(mergedArray));
+                    break;
+                case 'GridClearSort':
+                    if (!isSortable) {
+                        break;
+                    }
+                    this.ctx.grid.sortChange.next([]);
+                    break;
+                case 'GridFilter':
+                    if (!isFilterable) {
+                        break;
+                    }
+                    this.processFilterResponse(cmd.filter);
+                    break;
+                case 'GridClearFilter':
+                    if (!isFilterable) {
+                        break;
+                    }
+                    this.ctx.grid.filterChange.next(undefined);
+                    break;
+                case 'GridGroup':
+                    if (!isGroupable) {
+                        break;
+                    }
+                    this.processArrayResponse([cmd.group], this.ctx.grid.currentState.group || [], (item) => item.field, (mergedArray) => this.ctx.grid.groupChange.next(mergedArray));
+                    break;
+                case 'GridClearGroup':
+                    if (!isGroupable) {
+                        break;
+                    }
+                    this.ctx.grid.groupChange.next([]);
+                    break;
+                case 'GridHighlight':
+                    if (!this.ctx.highlightDirective) {
+                        break;
+                    }
+                    this.processHighlightResponse([cmd.highlight]);
+                    break;
+                case 'GridClearHighlight':
+                    if (!this.ctx.highlightDirective) {
+                        break;
+                    }
+                    this.ctx.highlightDirective['setState']([]);
+                    break;
+                case 'GridSelect': {
+                    this.processSelectionResponse([cmd.select], messages);
+                    break;
+                }
+                case 'GridClearSelect': {
+                    const selectionInstance = this.getSelectionInstance();
+                    if (!selectionInstance) {
+                        this.updateLastMessage(messages, this.ctx.localization?.get('aiAssistantSelectionNotEnabled'));
+                        break;
+                    }
+                    this.applySelectionState(selectionInstance, []);
+                    break;
+                }
+                case 'GridColumnResize': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    // parse size (accept numeric or strings like '200px')
+                    let newWidth;
+                    if (typeof cmd.size === 'number') {
+                        newWidth = cmd.size;
+                    }
+                    else if (typeof cmd.size === 'string') {
+                        const numericPart = parseFloat(cmd.size);
+                        if (!isNaN(numericPart)) {
+                            newWidth = numericPart;
+                        }
+                    }
+                    if (typeof newWidth === 'number') {
+                        const oldWidth = col.width;
+                        // set the column width (ColumnBase.width setter handles string -> number)
+                        col.width = newWidth;
+                        // emit columnResize event with ColumnResizeArgs[]
+                        const args = [{ column: col, oldWidth: oldWidth, newWidth: newWidth }];
+                        this.ctx.grid.columnResize.emit(args);
+                    }
+                    break;
+                }
+                case 'GridColumnReorder': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    const newPosition = Number(cmd.position);
+                    if (!isNaN(newPosition) && newPosition >= 0) {
+                        this.changeColumnPosition(col, newPosition);
+                    }
+                    break;
+                }
+                case 'GridColumnShow':
+                case 'GridColumnHide': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    const targetHidden = cmd.type === 'GridColumnHide';
+                    const changed = updateColumnHierarchy(col, (current) => {
+                        if (current.hidden === targetHidden) {
+                            return false;
+                        }
+                        current.hidden = targetHidden;
+                        return true;
+                    });
+                    if (changed.length) {
+                        this.columnInfoService.changeVisibility(changed);
+                    }
+                    break;
+                }
+                case 'GridColumnLock':
+                case 'GridColumnUnlock': {
+                    const col = findColumnById(cmd.id);
+                    if (!col) {
+                        break;
+                    }
+                    const targetLocked = cmd.type === 'GridColumnLock';
+                    const changed = updateColumnHierarchy(col, (current) => {
+                        if (current.locked === targetLocked) {
+                            return false;
+                        }
+                        current.locked = targetLocked;
+                        return true;
+                    });
+                    if (changed.length) {
+                        this.columnInfoService.changeLocked(changed);
+                    }
+                    break;
+                }
+                case 'GridPage': {
+                    this.processPageCommand(cmd);
+                    break;
+                }
+                case 'GridPageSize': {
+                    this.processPageSizeCommand(cmd);
+                    break;
+                }
+                case 'GridExportExcel': {
+                    this.runExportWithFileName(this.ctx.excelComponent, cmd.fileName, () => this.ctx.grid.saveAsExcel());
+                    break;
+                }
+                case 'GridExportPDF': {
+                    this.runExportWithFileName(this.ctx.pdfComponent, cmd.fileName, () => this.ctx.grid.emitPDFExportEvent());
+                    break;
+                }
+                default:
+                    // Unknown command - ignore
+                    break;
+            }
+        });
+    }
+    runExportWithFileName(component, fileName, action) {
+        if (!component || !fileName) {
+            action();
+            return;
+        }
+        const previousFileName = component.fileName;
+        component.fileName = fileName;
+        action();
+        const isExcel = component === this.ctx.excelComponent;
+        if (isExcel) {
+            this.zone.runOutsideAngular(() => {
+                this.ctx.excelComponent.fileCreated.subscribe(() => {
+                    component.fileName = previousFileName;
+                });
+            });
+        }
+        else {
+            component.fileName = previousFileName;
+        }
+    }
+    processPageCommand(command) {
+        const pageSize = this.getCurrentPageSizeValue();
+        if (!isPresent(pageSize) || pageSize <= 0) {
+            return;
+        }
+        const total = this.getTotalItemsCount();
+        const requestedPage = Number(command.page);
+        let targetPage = Number.isFinite(requestedPage) ? Math.floor(requestedPage) : 1;
+        if (targetPage < 1) {
+            targetPage = 1;
+        }
+        if (isPresent(total) && pageSize > 0) {
+            const maxPage = Math.max(1, Math.ceil(total / pageSize));
+            targetPage = Math.min(targetPage, maxPage);
+        }
+        const skip = (targetPage - 1) * pageSize;
+        this.emitGridPageChange(skip, pageSize);
+    }
+    processPageSizeCommand(command) {
+        const rawPageSize = Number(command.pageSize);
+        if (!Number.isFinite(rawPageSize)) {
+            return;
+        }
+        const newPageSize = Math.max(1, Math.floor(rawPageSize));
+        const skip = Math.max(0, this.ctx.grid?.skip ?? 0);
+        this.ensurePageSizeOption(newPageSize);
+        this.emitGridPageChange(skip, newPageSize);
+    }
+    emitGridPageChange(skip, take) {
+        const grid = this.ctx.grid;
+        const normalizedSkip = Math.max(0, Math.floor(skip));
+        const normalizedTake = Math.max(1, Math.floor(take));
+        grid.skip = normalizedSkip;
+        grid.pageSize = normalizedTake;
+        grid.pageChange.emit({ skip: normalizedSkip, take: normalizedTake });
+    }
+    ensurePageSizeOption(pageSize) {
+        const grid = this.ctx.grid;
+        if (!grid) {
+            return;
+        }
+        const pageable = grid.pageable;
+        if (!pageable || typeof pageable === 'boolean') {
+            return;
+        }
+        const pageSizes = pageable.pageSizes;
+        if (!Array.isArray(pageSizes) || pageSizes.length === 0) {
+            return;
+        }
+        if (pageSizes.includes(pageSize)) {
+            return;
+        }
+        const uniqueSizes = [pageSize, ...pageSizes.filter(size => size !== pageSize)];
+        grid.pageable = {
+            ...pageable,
+            pageSizes: uniqueSizes
+        };
+        const changeDetector = grid?.changeDetectorRef;
+        if (changeDetector && typeof changeDetector.markForCheck === 'function') {
+            changeDetector.markForCheck();
+        }
+    }
+    getCurrentPageSizeValue() {
+        const grid = this.ctx.grid;
+        if (!grid) {
+            return null;
+        }
+        const candidates = [grid.pageSize, grid.currentState?.take, this.ctx.dataBindingDirective?.['state']?.take];
+        for (const candidate of candidates) {
+            if (typeof candidate === 'number' && candidate > 0) {
+                return candidate;
+            }
+        }
+        const pageable = grid.pageable;
+        if (pageable && typeof pageable === 'object' && Array.isArray(pageable.pageSizes)) {
+            const numericSize = pageable.pageSizes.find(size => typeof size === 'number' && size > 0);
+            if (numericSize) {
+                return numericSize;
+            }
+        }
+        const originalData = this.ctx.dataBindingDirective?.['originalData'];
+        if (Array.isArray(originalData) && originalData.length > 0) {
+            return originalData.length;
+        }
+        return null;
+    }
+    getTotalItemsCount() {
+        const grid = this.ctx.grid;
+        if (!grid) {
+            return null;
+        }
+        const gridData = grid.data;
+        if (gridData && typeof gridData.total === 'number') {
+            return gridData.total;
+        }
+        const view = grid.view;
+        if (view && typeof view.total === 'number') {
+            return view.total;
+        }
+        const originalData = this.ctx.dataBindingDirective?.['originalData'];
+        if (Array.isArray(originalData)) {
+            return originalData.length;
+        }
+        return null;
+    }
+    getSelectionInstance() {
+        const selectionDirective = this.ctx.grid?.selectionDirective;
+        if (selectionDirective && typeof selectionDirective === 'object') {
+            return selectionDirective;
+        }
+        const defaultSelection = this.ctx.grid?.defaultSelection;
+        if (defaultSelection && typeof defaultSelection === 'object') {
+            return defaultSelection;
+        }
+        return null;
+    }
+    updateLastMessage(messages, newMessage) {
+        if (!messages.length) {
+            return;
+        }
+        messages[messages.length - 1] = newMessage;
+    }
+    getHighlightItems(descriptors) {
+        if (!descriptors?.length) {
+            return [];
+        }
+        const data = this.ctx.dataBindingDirective?.['originalData'] || [];
+        return highlightBy(data, descriptors, this.columns);
+    }
+    processSelectionResponse(selection, messages) {
+        const selectionInstance = this.getSelectionInstance();
+        if (!selectionInstance) {
+            this.updateLastMessage(messages, this.ctx.localization?.get('aiAssistantSelectionNotEnabled'));
+            return;
+        }
+        const descriptors = (selection || []).filter((descriptor) => Boolean(descriptor));
+        if (descriptors.length === 0) {
+            this.applySelectionState(selectionInstance, []);
+            return;
+        }
+        const highlightItems = this.getHighlightItems(descriptors);
+        if (!highlightItems.length) {
+            this.applySelectionState(selectionInstance, []);
+            return;
+        }
+        const hasCellSelections = highlightItems.some(item => isPresent(item.columnKey));
+        const hasRowSelections = highlightItems.some(item => !isPresent(item.columnKey));
+        const isCellMode = selectionInstance.isCellSelectionMode;
+        if ((!isCellMode && hasCellSelections) || (isCellMode && hasRowSelections)) {
+            const key = isCellMode ? 'aiAssistantSelectionRowModeRequired' : 'aiAssistantSelectionCellModeRequired';
+            this.updateLastMessage(messages, this.ctx.localization?.get(key));
+            return;
+        }
+        const selectionState = this.mapHighlightItemsToSelection(selectionInstance, highlightItems, isCellMode);
+        this.applySelectionState(selectionInstance, selectionState);
+    }
+    mapHighlightItemsToSelection(selectionInstance, highlightItems, isCellMode) {
+        const data = this.ctx.dataBindingDirective?.['originalData'] || [];
+        if (isCellMode) {
+            const mapped = highlightItems
+                .filter(item => isPresent(item.itemKey) && isPresent(item.columnKey))
+                .map(item => {
+                const rowIndex = item.itemKey;
+                const columnIndex = item.columnKey;
+                const dataItem = data[rowIndex];
+                if (!isPresent(dataItem)) {
+                    return null;
+                }
+                if (typeof selectionInstance['getSelectionItem'] === 'function') {
+                    const columnComponent = this.leafColumns[columnIndex];
+                    const selectionItem = selectionInstance['getSelectionItem']({ dataItem, index: rowIndex }, columnComponent, columnIndex);
+                    if (selectionItem && isPresent(selectionItem.itemKey) && isPresent(selectionItem.columnKey)) {
+                        return selectionItem;
+                    }
+                    return null;
+                }
+                const itemKey = typeof selectionInstance.getItemKey === 'function'
+                    ? selectionInstance.getItemKey({ dataItem, index: rowIndex })
+                    : rowIndex;
+                return isPresent(itemKey) ? { itemKey, columnKey: columnIndex } : null;
+            })
+                .filter((item) => isPresent(item));
+            return mapped.filter((item, index, self) => self.findIndex(other => other.itemKey === item.itemKey && other.columnKey === item.columnKey) === index);
+        }
+        const rowKeys = highlightItems
+            .filter(item => isPresent(item.itemKey))
+            .map(item => {
+            const rowIndex = item.itemKey;
+            const dataItem = data[rowIndex];
+            if (!isPresent(dataItem)) {
+                return null;
+            }
+            if (typeof selectionInstance.getItemKey === 'function') {
+                return selectionInstance.getItemKey({ dataItem, index: rowIndex });
+            }
+            return rowIndex;
+        })
+            .filter(isPresent);
+        return Array.from(new Set(rowKeys));
+    }
+    applySelectionState(selectionInstance, selectionState) {
+        selectionInstance.selectedKeys = selectionState;
+        if (typeof selectionInstance['setState'] === 'function') {
+            selectionInstance['setState'](selectionState);
+        }
+        const changeDetector = selectionInstance['cd'];
+        if (changeDetector && typeof changeDetector.markForCheck === 'function') {
+            changeDetector.markForCheck();
+        }
+        if (typeof selectionInstance['notifyChange'] === 'function') {
+            selectionInstance['notifyChange']();
+        }
+    }
+    replaceQuotedColumnId(message, replacement) {
+        if (!replacement) {
+            const columnIdPattern = /(?:&quot;|")(k-grid\d+-col\d+)(?:&quot;|")\s*/g;
+            return message.replace(columnIdPattern, '').replace(/\s{2,}/g, ' ').trim();
+        }
+        const columnIdPattern = /(?:&quot;|")(k-grid\d+-col\d+)(?:&quot;|")/g;
+        return message.replace(columnIdPattern, (match) => {
+            const isEncoded = match.startsWith('&quot;');
+            return isEncoded ? `&quot;${replacement}&quot;` : `"${replacement}"`;
+        });
+    }
+    isColumnCommand(type) {
+        return type === 'GridColumnResize' ||
+            type === 'GridColumnReorder' ||
+            type === 'GridColumnShow' ||
+            type === 'GridColumnHide' ||
+            type === 'GridColumnLock' ||
+            type === 'GridColumnUnlock';
+    }
+    getColumnReplacement(column) {
+        if (!column) {
+            return '';
+        }
+        if (column.title && String(column.title).trim()) {
+            return String(column.title).trim();
+        }
+        if (column.field && String(column.field).trim()) {
+            return String(column.field).trim();
+        }
+        return '';
+    }
+    processHighlightResponse(highlight) {
+        const highlightedItems = this.getHighlightItems(highlight);
         this.ctx.highlightDirective['setState'](highlightedItems);
     }
     processFilterResponse(filter) {
@@ -212,7 +699,48 @@ export class AiAssistantComponent {
             this.ctx.grid.filterChange.next(mergedFilter);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiAssistantComponent, deps: [{ token: i1.HttpClient }, { token: i2.ContextService }, { token: i3.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    changeColumnPosition(column, newPosition) {
+        const grid = this.ctx.grid;
+        if (!grid?.columns) {
+            return;
+        }
+        const currentColumns = grid.columns.toArray();
+        const currentIndex = currentColumns.findIndex(col => col === column);
+        if (currentIndex === -1) {
+            return;
+        }
+        if (newPosition < 0 || newPosition >= currentColumns.length) {
+            return;
+        }
+        const sortedColumns = currentColumns
+            .map((col, idx) => ({ col, physicalIndex: idx, visualOrder: col.orderIndex ?? idx }))
+            .sort((a, b) => a.visualOrder - b.visualOrder);
+        const currentVisualPos = sortedColumns.findIndex(item => item.physicalIndex === currentIndex);
+        if (currentVisualPos === newPosition) {
+            return;
+        }
+        currentColumns.forEach((col, idx) => {
+            const sortedIndex = sortedColumns.findIndex(item => item.physicalIndex === idx);
+            if (idx === currentIndex) {
+                col.orderIndex = newPosition;
+            }
+            else if (currentVisualPos < newPosition) {
+                col.orderIndex = (sortedIndex > currentVisualPos && sortedIndex <= newPosition)
+                    ? sortedIndex - 1 : sortedIndex;
+            }
+            else {
+                col.orderIndex = (sortedIndex >= newPosition && sortedIndex < currentVisualPos)
+                    ? sortedIndex + 1 : sortedIndex;
+            }
+            col.isReordered = true;
+        });
+        grid.columnReorder.emit({
+            column: column,
+            oldIndex: currentVisualPos,
+            newIndex: newPosition
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AiAssistantComponent, deps: [{ token: i1.HttpClient }, { token: i2.ContextService }, { token: i3.ColumnInfoService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AiAssistantComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "aiPrompt", first: true, predicate: AIPromptComponent, descendants: true }], ngImport: i0, template: `
         <kendo-aiprompt
             #aiPrompt
@@ -308,7 +836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </kendo-aiprompt>
     `
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ContextService }, { type: i3.ColumnInfoService }], propDecorators: { aiPrompt: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ContextService }, { type: i3.ColumnInfoService }, { type: i0.NgZone }], propDecorators: { aiPrompt: [{
                 type: ViewChild,
                 args: [AIPromptComponent]
             }] } });

package/esm2022/rendering/toolbar/tools/ai-assistant/models.mjs

@@ -18,7 +18,7 @@ export const DEFAULT_AI_REQUEST_OPTIONS = {
 /**
  * Represents the event data when the AI Assistant request completes successfully.
  */
-export class GridToolbarAIResponseSuccessEvent extends PreventableEvent {
+export class GridAIAssistantResponseSuccessEvent extends PreventableEvent {
     /**
      * The HTTP response from the AI service.
      */
@@ -31,7 +31,7 @@ export class GridToolbarAIResponseSuccessEvent extends PreventableEvent {
 /**
  * Represents the event data when the AI Assistant request completes with an error.
  */
-export class GridToolbarAIResponseErrorEvent extends PreventableEvent {
+export class GridAIAssistantResponseErrorEvent extends PreventableEvent {
     /**
      * The HTTP error response from the AI service.
      */