New Demo: Chat - Page-Level AI Assistant

[16adianay]

Add a new demo: Page-Level AI Assistant for the Chat component

The demo shows how Chat can be used as a page-level AI assistant that interprets natural-language commands and drives other widgets on the page (Form, DataGrid) — e.g. filling form fields or filtering/updating grid data via chat

[Copilot]

🟡 Changes recommended

Smart Paste timing and cross-framework routing inconsistencies can cause late mutations or incorrect failures.

13 open findings

• Start custom loading within the grid helper · New
• Default invalid form actions to Smart Paste · New
• Abort Smart Paste when timeout expires · New
• Default invalid form actions to Smart Paste · New
• Abort Smart Paste when timeout expires · New
• Default invalid form actions to Smart Paste · New
• Abort Smart Paste when timeout expires · New
• Start custom loading within the grid helper · New
• Abort Smart Paste when timeout expires · New
• Abort Smart Paste when timeout expires · New
• Start custom loading within the grid helper · New
• Default invalid form actions to Smart Paste · New
• Correct the duplicated verb · New

What changed in this PR

Adds a cross-framework Chat demo where an AI assistant controls a Form and DataGrid through natural-language requests.

Changes:

• Implements AI request routing, Smart Paste, and DataGrid commands.
• Adds Angular, React, Vue, and jQuery variants.
• Registers demo metadata, CSP access, and documentation.

File	Description
apps/​demos/​utils/​server/​csp-server.js	Allows demo AI connections and scripts.
apps/​demos/​menuMeta.json	Registers the new demo.
.../​Vue/​TaskGrid.vue	Implements the Vue task grid.
.../​Vue/​service.ts	Configures Vue AI requests.
.../​Vue/​index.ts	Mounts the Vue application.
.../​Vue/​index.html	Hosts the Vue demo.
.../​Vue/​gridCommands.ts	Implements Vue grid commands.
.../​Vue/​formCommands.ts	Implements Vue form commands.
.../​Vue/​EmployeeForm.vue	Implements the Vue employee form.
.../​Vue/​data.ts	Defines Vue data and types.
.../​Vue/​chatRouter.ts	Routes Vue chat requests.
.../​Vue/​App.vue	Composes the Vue demo.
.../​Vue/​AiAssistant.vue	Implements the Vue assistant UI.
.../​ReactJs/​TaskGrid.js	Implements the JavaScript React grid.
.../​ReactJs/​styles.css	Styles the JavaScript React demo.
.../​ReactJs/​service.js	Configures JavaScript React AI requests.
.../​ReactJs/​index.js	Mounts the JavaScript React app.
.../​ReactJs/​index.html	Hosts the JavaScript React demo.
.../​ReactJs/​grid-commands.js	Implements grid commands.
.../​ReactJs/​form-commands.js	Implements form commands.
.../​ReactJs/​EmployeeForm.js	Implements the employee form.
.../​ReactJs/​data.js	Defines demo data.
.../​ReactJs/​chat-router.js	Routes assistant requests.
.../​ReactJs/​App.js	Composes the demo.
.../​ReactJs/​AiAssistant.js	Implements the assistant UI.
.../​React/​TaskGrid.tsx	Implements the typed React grid.
.../​React/​styles.css	Styles the React demo.
.../​React/​service.ts	Configures React AI requests.
.../​React/​index.tsx	Mounts the React app.
.../​React/​index.html	Hosts the React demo.
.../​React/​grid-commands.ts	Implements typed grid commands.
.../​React/​form-commands.ts	Implements typed form commands.
.../​React/​EmployeeForm.tsx	Implements the React form.
.../​React/​data.ts	Defines React data and types.
.../​React/​chat-router.ts	Routes React requests.
.../​React/​App.tsx	Composes the React demo.
.../​React/​AiAssistant.tsx	Implements the React assistant UI.
.../​jQuery/​styles.css	Styles the jQuery demo.
.../​jQuery/​index.js	Implements the jQuery demo behavior.
.../​jQuery/​index.html	Hosts the jQuery demo.
.../​jQuery/​data.js	Defines jQuery demo data.
.../​description.md	Documents the demo and APIs.
.../​Angular/​index.html	Hosts the Angular demo.
.../​Angular/​app/​data.ts	Defines Angular data and types.
.../​task-grid/​task-grid.component.ts	Implements grid behavior.
.../​task-grid/​task-grid.component.html	Defines the grid template.
.../​task-grid/​task-grid.component.css	Styles the grid.
.../​employee-form/​employee-form.component.ts	Implements form behavior.
.../​employee-form/​employee-form.component.html	Defines the form template.
.../​employee-form/​employee-form.component.css	Styles the form.
.../​ai-assistant/​ai-assistant.component.ts	Implements assistant behavior.
.../​ai-assistant/​ai-assistant.component.html	Defines the assistant template.
.../​ai-assistant/​ai-assistant.component.css	Styles the assistant.
.../​commands/​grid-commands.ts	Implements Angular grid commands.
.../​commands/​form-commands.ts	Implements Angular form commands.
.../​Angular/​app/​app.service.ts	Routes Angular requests.
.../​Angular/​app/​app.component.ts	Bootstraps and coordinates the demo.
.../​Angular/​app/​app.component.html	Composes Angular components.
.../​Angular/​app/​app.component.css	Styles the demo container.
.../​Angular/​app/​ai/​ai.service.ts	Configures Angular AI requests.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.