AI Assistant: DataGrid - write JS frameworks demos (React)#33660
AI Assistant: DataGrid - write JS frameworks demos (React)#33660Raushen wants to merge 16 commits into
Conversation
…AIAssistant-Demo-React
There was a problem hiding this comment.
Pull request overview
Adds a new DataGrid “AI Assistant” demo for React in both JavaScript and TypeScript variants, wired to an Azure OpenAI-backed AIIntegration, and aligns the jQuery version’s DataGrid configuration with the React demos.
Changes:
- Introduced React (TS) and ReactJs (JS) demo implementations for DataGrid AI Assistant, including SystemJS bootstrapping pages.
- Added an Azure OpenAI-based
AIIntegrationservice layer (with retry-on-connection-error behavior) for both React variants. - Enabled
filterSyncEnabledin the existing jQuery DataGrid demo to match the React behavior.
Reviewed changes
Copilot reviewed 10 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/demos/Demos/DataGrid/AIAssistant/ReactJs/service.js | Implements Azure OpenAI-backed AIIntegration for the React JS demo. |
| apps/demos/Demos/DataGrid/AIAssistant/ReactJs/index.js | React JS entry point mounting App. |
| apps/demos/Demos/DataGrid/AIAssistant/ReactJs/index.html | SystemJS-based host page for the React JS demo. |
| apps/demos/Demos/DataGrid/AIAssistant/ReactJs/App.js | React JS DataGrid demo with AIAssistant and suggestion handling. |
| apps/demos/Demos/DataGrid/AIAssistant/React/types.ts | Adds TS types for OpenAI chat messages and demo data shape. |
| apps/demos/Demos/DataGrid/AIAssistant/React/service.ts | Implements Azure OpenAI-backed AIIntegration for the React TS demo. |
| apps/demos/Demos/DataGrid/AIAssistant/React/index.tsx | React TS entry point mounting App. |
| apps/demos/Demos/DataGrid/AIAssistant/React/index.html | SystemJS-based host page for the React TS demo. |
| apps/demos/Demos/DataGrid/AIAssistant/React/App.tsx | React TS DataGrid demo with AIAssistant and suggestion handling. |
| apps/demos/Demos/DataGrid/AIAssistant/jQuery/index.js | Enables filterSyncEnabled in the jQuery DataGrid configuration. |
…AIAssistant-Demo-React
| }, | ||
| }; | ||
|
|
||
| const response = await aiService.chat.completions.create(params as any, { signal }); |
There was a problem hiding this comment.
Can we avoid using any? As I can see in other demos, there is no need to use as any for params. Otherwise, we can redefine the type in ./types.ts
| <DataGrid | ||
| id="gridContainer" | ||
| dataSource={sales} | ||
| showBorders={true} |
There was a problem hiding this comment.
lets use short syntax for boolean value for true here and in other places, it is more react-style
| showBorders={true} | |
| showBorders |
…AIAssistant-Demo-React
| import { AIIntegration } from 'devextreme-react/common/ai-integration'; | ||
| import type { RequestParams, Response } from 'devextreme-react/common/ai-integration'; | ||
| import { AzureOpenAI } from 'openai'; | ||
| import type { ChatCompletionCreateParamsNonStreaming } from 'openai/resources/chat/completions'; |
There was a problem hiding this comment.
Use OpenAI.ChatCompletionCreateParamsNonStreaming instead + need to import OpenAI from openai
| sendRequest({ prompt, data }: RequestParams): Response { | ||
| const isValidRequest = JSON.stringify(prompt.user).length < 5000; | ||
| if (!isValidRequest) { |
| } | ||
| export const aiIntegration = new AIIntegration({ | ||
| sendRequest({ prompt, data }) { | ||
| const isValidRequest = JSON.stringify(prompt.user).length < 5000; |
No description provided.