HtmlEditor and Chat AI Demos: Create an AI service to make demo code more readable #32154

marker-dao · 2026-01-09T17:26:13Z

No description provided.

Copilot

Pull request overview

This pull request refactors AI integration code in HtmlEditor and Chat demos by extracting AI service logic into dedicated service files, improving code organization and readability across all framework implementations (Angular, React, ReactJs, and Vue).

Key Changes:

Created separate service files containing AI integration logic (service.ts/service.js) for both HtmlEditor and Chat demos
Removed AI service implementation from component files and data files
Updated imports to use the new service modules

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts	New service file exporting aiIntegration instance with OpenAI integration logic
apps/demos/Demos/HtmlEditor/AITextEditing/Vue/App.vue	Updated to import aiIntegration from service.ts instead of defining it inline
apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js	New service file with AI integration logic and config
apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/data.js	Removed AI integration code moved to service.js
apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/App.js	Updated imports to use service.js
apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts	New TypeScript service file with AI integration logic
apps/demos/Demos/HtmlEditor/AITextEditing/React/data.ts	Removed AI integration code moved to service.ts
apps/demos/Demos/HtmlEditor/AITextEditing/React/App.tsx	Updated imports to use service.ts
apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.service.ts	Removed AzureOpenAIConfig and getAzureOpenAIConfig method
apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/app.component.ts	Refactored to use AiService instead of inline AI logic
apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai/ai.service.ts	New Angular service encapsulating AI integration logic
apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/service.ts	New service file exporting getAIResponse function
apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts	Removed AzureOpenAIConfig moved to service.ts
apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue	Updated to import getAIResponse from service.ts
apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js	Updated to import getAIResponse from service.js
apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js	New service file with AI response logic
apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js	Removed AzureOpenAIConfig moved to service.js
apps/demos/Demos/Chat/AIAndChatbotIntegration/React/useApi.ts	Updated to import getAIResponse and Message type from service.ts
apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts	New TypeScript service file with AI response logic and Message type export
apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts	Removed AzureOpenAIConfig moved to service.ts
apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.service.ts	Refactored to use AiService for AI responses
apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.ts	Added AiService to providers
apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/ai/ai.service.ts	New Angular service for AI integration

Copilot · 2026-01-09T17:37:12Z

apps/demos/Demos/HtmlEditor/AITextEditing/ReactJs/service.js

+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};


The AzureOpenAIConfig is duplicated across service files. For HtmlEditor demos, the Vue version imports it from data.ts while ReactJs and React define it inline. Consider importing from data.ts or a shared config file for consistency across all frameworks.

Suggested change

const AzureOpenAIConfig = {

dangerouslyAllowBrowser: true,

deployment: 'gpt-4o-mini',

apiVersion: '2024-02-01',

endpoint: 'https://public-api.devexpress.com/demo-openai',

apiKey: 'DEMO',

};

import { AzureOpenAIConfig } from '../data';

Copilot · 2026-01-09T17:37:13Z

apps/demos/Demos/HtmlEditor/AITextEditing/React/service.ts

+
+type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
+  content: string;
+};
+
+const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};
+


The AzureOpenAIConfig is duplicated. The React implementation defines it inline while the Vue version imports it from data.ts. Consider using a consistent approach across frameworks.

Suggested change

type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {

content: string;

};

const AzureOpenAIConfig = {

dangerouslyAllowBrowser: true,

deployment: 'gpt-4o-mini',

apiVersion: '2024-02-01',

endpoint: 'https://public-api.devexpress.com/demo-openai',

apiKey: 'DEMO',

};

import { AzureOpenAIConfig } from '../data';

type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {

content: string;

};

Copilot · 2026-01-09T17:37:13Z

apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts

+      { role: 'system', content: prompt.system || '' },
+      { role: 'user', content: prompt.user || '' },


The Vue version uses prompt.system || '' and prompt.user || '' with the logical OR operator, while React and ReactJs use the nullish coalescing operator (??). Consider using ?? consistently across all frameworks for better null/undefined handling, as it only coalesces on null/undefined, not on empty strings.

Suggested change

{ role: 'system', content: prompt.system || '' },

{ role: 'user', content: prompt.user || '' },

{ role: 'system', content: prompt.system ?? '' },

{ role: 'user', content: prompt.user ?? '' },

Copilot · 2026-01-09T17:37:13Z

apps/demos/Demos/HtmlEditor/AITextEditing/Angular/app/ai/ai.service.ts

+      { role: 'system', content: prompt.system },
+      { role: 'user', content: prompt.user },


The Angular version uses prompt.system and prompt.user without null coalescing or default values, while other frameworks use ?? '' or || ''. This inconsistency could lead to different behaviors if prompt.system or prompt.user are undefined or null. Add null coalescing for consistency.

Suggested change

{ role: 'system', content: prompt.system },

{ role: 'user', content: prompt.user },

{ role: 'system', content: prompt.system ?? '' },

{ role: 'user', content: prompt.user ?? '' },

Copilot · 2026-01-09T17:37:14Z

apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/service.js

+export const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};


The Chat demos export AzureOpenAIConfig from service files in ReactJs and React implementations, but this config is not used externally based on the data.js and useApi.js changes. The export should be removed to avoid exposing internal implementation details.

Copilot · 2026-01-09T17:37:14Z

apps/demos/Demos/Chat/AIAndChatbotIntegration/React/service.ts

+export const AzureOpenAIConfig = {
+  dangerouslyAllowBrowser: true,
+  deployment: 'gpt-4o-mini',
+  apiVersion: '2024-02-01',
+  endpoint: 'https://public-api.devexpress.com/demo-openai',
+  apiKey: 'DEMO',
+};


The AzureOpenAIConfig is exported but not used externally based on the data.ts changes. Remove the export keyword to avoid exposing internal implementation details.

Copilot · 2026-01-09T17:37:14Z

apps/demos/Demos/HtmlEditor/AITextEditing/Vue/service.ts

+
+const aiService = new AzureOpenAI(AzureOpenAIConfig);
+
+async function getAIResponse(messages: AIMessage[], signal: AbortSignal): Promise<string> {


Add an explicit return type annotation to improve type safety and readability. The function should return Promise<string>.

marker dao ® added 4 commits January 9, 2026 16:35

refactor(htmleditor && chat): Angular

e6e4b2e

refactor(htmleditor && chat): React

299799f

fix(demos): Move files to the ai folder

3b254ce

refactor(htmleditor && chat): Vue

6ad3c31

marker-dao self-assigned this Jan 9, 2026

marker-dao added force all tests 26_1 labels Jan 9, 2026

marker-dao marked this pull request as ready for review January 9, 2026 17:26

marker-dao requested a review from a team as a code owner January 9, 2026 17:26

Copilot AI review requested due to automatic review settings January 9, 2026 17:26

Copilot started reviewing on behalf of marker-dao January 9, 2026 17:27 View session

Copilot AI reviewed Jan 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

HtmlEditor and Chat AI Demos: Create an AI service to make demo code more readable #32154

HtmlEditor and Chat AI Demos: Create an AI service to make demo code more readable #32154

marker-dao commented Jan 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Copilot AI Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		{ role: 'system', content: prompt.system \|\| '' },
		{ role: 'user', content: prompt.user \|\| '' },

		{ role: 'system', content: prompt.system },
		{ role: 'user', content: prompt.user },


		const aiService = new AzureOpenAI(AzureOpenAIConfig);

		async function getAIResponse(messages: AIMessage[], signal: AbortSignal): Promise<string> {

HtmlEditor and Chat AI Demos: Create an AI service to make demo code more readable #32154

Are you sure you want to change the base?

HtmlEditor and Chat AI Demos: Create an AI service to make demo code more readable #32154

Conversation

marker-dao commented Jan 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant