981174: Add Grid with AI Assist view sample

react/src/ai-components/grid/assistive-grid/AIModel.tsx

@@ -0,0 +1,57 @@
+import { getAzureChatAIRequest } from '../../../ai-models';
+import {executeGridAction} from './GridAction';
+
+
+function onPromptExecute(text: string | undefined, gridInstance: any, dialogInstance: any, assistInstance: any, columns: any) {
+    let textArea = `Convert the following natural language query into a JSON object representing Syncfusion Query operations.
+
+    Rules:
+    - Output only the JSON object, no extra text.
+    - Field names must be from: ${JSON.stringify(columns)}.
+    - Sort direction must be either "Ascending" or "Descending".
+
+    Action Handling:
+    - Include only the actions explicitly mentioned in the query: filter, sort, page, group, clearFilter, clearSort, clearGroup.
+    - Operator shold be (startswith, endswith, contains, doesnotstartwith, doesnotendwith, doesnotcontain, equal, notequal, greaterthan, greaterthanorequal, lessthan, lessthanorequal, isnull, isnotnull, isempty, isnotempty, between, in, notin)
+    - If the query only involves filtering, include only the "filter" key.
+    - If the query only involves sorting, include only the "sort" key.
+    - If the query includes a clear action:
+    - Use 'clearFilter: []' to clear **all filters**.
+    - Use 'clearSort: []' to clear **all sorting**.
+    - Use 'clearGroup: []' to clear **all grouping**.
+    - If the query specifies clearing filters/sorting/grouping for specific fields, include those field names as string arrays: clearFilter: ["field1"], clearSort: ["field2"], clearGroup: ["field3"].
+
+    Supported Operations:
+    - filter: array of objects with { field, operator, value (array for "in"/"notin", otherwise single value), ignoreCase }
+    - sort: array of { field, direction }
+    - page: object with { pageNumber, pageSize }
+    - group: array of field names
+
+    Additional Requirement:
+    - Include a "message" field in the JSON object that explains the query action, referencing the original query text.
+
+    Query: ${text}`;
+
+    let aiOutput = getAzureChatAIRequest({ messages: [{ role: 'user', content: textArea }] });
+    aiOutput.then((result: any) => {
+        if (!result) {
+            return;
+        }
+        let jsonResult = result;
+        if (result.indexOf("```json") !== -1) {
+            jsonResult = result.split("```json")[1].split("```")[0].trim();
+        }
+        let data;
+        try {
+            data = JSON.parse(jsonResult);
+            executeGridAction(data, gridInstance);
+        } catch (error) {
+            assistInstance.addPromptResponse({ prompt: error, response: error });
+            return;
+        }
+        assistInstance.addPromptResponse({ prompt: data.message, response: data });
+        dialogInstance.hide();
+    });
+}
+
+export {onPromptExecute};

react/src/ai-components/grid/assistive-grid/GridAction.tsx

@@ -0,0 +1,67 @@
+import { GridComponent } from '@syncfusion/ej2-react-grids';
+interface Filter {
+  field: string;
+  operator: string;
+  value: any;
+}
+
+interface Sort {
+  field: string;
+  direction: 'Ascending' | 'Descending';
+}
+
+interface Page {
+  pageNumber: number;
+  pageSize: number;
+}
+
+interface GridActionData {
+  filter?: Filter[];
+  clearFilter?: string[];
+  sort?: Sort[];
+  clearSort?: string[];
+  page?: Page;
+  group?: string[];
+  clearGroup?: string[];
+}
+export const executeGridAction = (data: GridActionData, gridInstance: GridComponent) => {
+    if (data.filter && data.filter.length) {
+        data.filter.forEach((filter: Filter) => {
+            gridInstance.filterByColumn(filter.field, filter.operator, filter.value);
+        })
+    }
+    if (data.clearFilter) {
+        if (data.clearFilter.length === 0) {
+            gridInstance.clearFiltering();
+        } else {
+            gridInstance.clearFiltering(data.clearFilter);
+        }
+    }
+    if (data.sort && data.sort.length) {
+        data.sort.forEach((sort: Sort) => {
+            gridInstance.sortColumn(sort.field, sort.direction, true);
+        })
+    }
+    else if (data.clearSort) {
+        gridInstance.clearSorting();
+    }
+    if (data.page && data.page.pageNumber && data.page.pageSize) {
+        gridInstance.goToPage(data.page.pageNumber);
+    }
+    if (data.group && data.group.length) {
+        const groupColumns: string[] = [...(gridInstance.groupSettings.columns ?? [])];
+        if (groupColumns.indexOf(data.group[0]) === -1) {
+            gridInstance.groupColumn(data.group[0]);
+        }
+    }
+    if (data.clearGroup) {
+        if (data.clearGroup.length === 0) {
+            gridInstance.clearGrouping();
+        } else {
+            const groupColumns: string[] = [...(gridInstance.groupSettings.columns ?? [])];
+            if (groupColumns.indexOf(data.clearGroup[0]) !== -1) {
+                gridInstance.ungroupColumn(data.clearGroup[0]);
+            }
+        }
+    }
+}

react/src/ai-components/grid/assistive-grid/assistive-grid.css

@@ -0,0 +1,131 @@
+#ai-grid-aiassistview .response-header .e-assistview-icon:before {
+  margin-right: 10px;
+} 
+
+#ai-grid-aiassistview .responseItemContent {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-left: 20px
+}
+
+#ai-grid-aiassistview .responseItemContent .response-header {
+  display: flex;
+  align-items: center;
+}
+
+#ai-grid-aiassistview .responseItemContent .assist-response-content {
+  margin-left: 35px;
+}
+
+#ai-grid-aiassistview .responseItemContent .response-header .e-assistview-icon:before {
+  margin-right: 10px;
+}
+
+#ai-grid-aiassistview .e-response-item-template .e-toolbar-items {
+  margin-left: 35px;
+}
+
+#ai-grid-aiassistview.e-aiassistview .e-footer {
+  width: 90%;
+}
+
+#ai-grid-aiassistview.e-aiassistview .e-output-container {
+  width: 100%;
+}
+#ai-grid-aiassistview.e-aiassistview .e-content-container .e-content {
+  overflow-y: auto;
+}
+#ai-grid-aiassistview .e-response-item-template .e-content-footer,
+.e-aiassistview .e-prompt-container {
+  display: none;
+}
+
+#ai-grid-aiassistview.e-aiassistview .e-view-container {
+  margin: 0;
+}
+
+#ai-grid .e-badge {
+  padding: 6px;
+  width: 70px;
+}
+
+#ai-grid .email {
+  color: gray;
+}
+
+#ai-grid .product-items {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+}
+#ai-grid .product-items p {
+  margin: 0px;
+}
+
+
+#ai-assist-dialog .e-suggestions {
+  max-width: 100%;
+  padding: 0 0 10px 0;
+}
+
+#ai-assist-dialog .e-suggestion-header {
+  font-weight: bold;
+  margin-bottom: 8px;
+  font-size: 14px;
+  text-align: left;
+}
+
+#ai-assist-dialog .e-suggestion-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+#ai-assist-dialog .e-suggestion-list ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+}
+
+#ai-assist-dialog .e-suggestion-list li {
+  display: inline-block;
+  padding: 6px 10px;
+  border-radius: 16px;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: normal;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 5px 2px;
+}
+
+#ai-assist-dialog .e-suggestion-list li:hover {
+  background: rgba(28, 27, 31, 0.05);
+}
+
+#dialog-target .e-dialog .e-footer-content {
+  border-top: 1px solid rgb(209, 213, 219);
+}
+
+.fluent-dark #ai-assist-dialog .e-suggestion-list li,
+.fluent2-dark #ai-assist-dialog .e-suggestion-list li,
+.tailwind-dark #ai-assist-dialog .e-suggestion-list li,
+.material-dark #ai-assist-dialog .e-suggestion-list li,
+.bootstrap5\.3-dark #ai-assist-dialog .e-suggestion-list li,
+.tailwind3-dark #ai-assist-dialog .e-suggestion-list li,
+.tailwind33-dark #ai-assist-dialog .e-suggestion-list li,
+.fabric-dark #ai-assist-dialog .e-suggestion-list li,
+.bootstrap-dark #ai-assist-dialog .e-suggestion-list li,
+.bootstrap4-dark #ai-assist-dialog .e-suggestion-list li,
+.bootstrap5-dark #ai-assist-dialog .e-suggestion-list li,
+.highcontrast #ai-assist-dialog .e-suggestion-list li {
+  box-shadow: 0 2px 4px rgb(228 228 228 / 15%);
+}
+
+#ai-grid.e-grid {
+  margin: 20px;
+}