Skip to content

Add Chat - Custom AI Assistant demo jQuery #35025

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
16adianay wants to merge 8 commits into
base: feature/demo_custom_AI_assistant
Choose a base branch
from
Open

Add Chat - Custom AI Assistant demo jQuery #35025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
eb26e96
Add Chat - Custom AI Assistant demo
16adianay Sep 2, 2026
c77a2dd
Fixed failed tests
16adianay Sep 3, 2026
55b5cee
Update CSP config
16adianay Sep 3, 2026
c028a8a
Fix lint errors
16adianay Sep 3, 2026
8c00e93
Fix Copilot suggestions
16adianay Sep 3, 2026
9b73618
Add a custom class to a popup wrapper
16adianay Sep 3, 2026
8ce4563
Update chat-router.js
16adianay Sep 3, 2026
de97259
Fix after review
16adianay Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions apps/demos/Demos/Chat/CustomAIAssistant/jQuery/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
const CLASSES = {
clearChatButton: 'ai-chat-clear-button',
};

const deployment = 'demo-mini';
const apiVersion = '2024-02-01';
const endpoint = 'https://public-api.devexpress.com/demo-openai';
const apiKey = 'DEMO';

const emptyViewMessage = 'How can I help with this page?';
const emptyViewPrompt =
'Update employee <b>Form</b> fields.\nFilter or sort tasks, display or hide <b>DataGrid</b> columns, or clear all filters and sorting.';

const SMART_PASTE_TIMEOUT_MS = 30000;
const MAX_USER_MESSAGE_LENGTH = 2000;
const FIELD_OR_VALUE_NOT_FOUND_MESSAGE =
'❌ No field or column exists with such a name, or the entered value is invalid. Please check the name and value and try again.';
const ROUTER_TARGETS = new Set(['form', 'grid', 'mixed', 'none']);
const FORM_ACTION_TYPES = new Set(['clear_field', 'clear_all', 'smart_paste']);

const titles = ['Mr.', 'Mrs.', 'Ms.'];
const colors = { High: '#F1BBBC', Normal: '#F9E2AE', Low: '#9FD89F' };
const states = ['California', 'New York', 'Texas'];
const positions = [
'CEO',
'Sales Assistant',
'CMO',
'Manager',
'Designer',
'Developer',
];

const employee = {
ID: 1,
Prefix: 'Mr.',
FirstName: 'John',
LastName: 'Heart',
Position: 'CEO',
State: 'California',
BirthDate: '1964/03/16',
};

const tasks = [
{
ID: 5,
Subject: 'Choose between PPO and HMO Health Plan',
StartDate: '2026/02/15',
DueDate: '2026/04/15',
Status: 'In Progress',
Priority: 'Low',
Completion: 75,
EmployeeID: 1,
},
{
ID: 6,
Subject: 'Google AdWords Strategy',
StartDate: '2026/02/16',
DueDate: '2026/02/28',
Status: 'Completed',
Priority: 'High',
Completion: 100,
EmployeeID: 1,
},
{
ID: 7,
Subject: 'New Brochures',
StartDate: '2026/02/17',
DueDate: '2026/02/24',
Status: 'Completed',
Priority: 'Normal',
Completion: 100,
EmployeeID: 1,
},
{
ID: 22,
Subject: 'Update NDA Agreement',
StartDate: '2026/03/14',
DueDate: '2026/03/16',
Status: 'Completed',
Priority: 'High',
Completion: 100,
EmployeeID: 1,
},
{
ID: 52,
Subject: 'Review Product Recall Report by Engineering Team',
StartDate: '2026/05/17',
DueDate: '2026/05/20',
Status: 'Completed',
Priority: 'High',
Completion: 100,
EmployeeID: 1,
},
];
32 changes: 32 additions & 0 deletions apps/demos/Demos/Chat/CustomAIAssistant/jQuery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
<script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
<script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script>

<script type="module">
import { AzureOpenAI } from "https://esm.sh/openai@4.73.1";

window.AzureOpenAI = AzureOpenAI;
</script>
<script src="data.js"></script>
<script src="index.js"></script>

<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="form-container"></div>
<div id="toast"></div>
<div id="grid-container"></div>
<div id="aiAssistantContainer"></div>
<div id="ai-fab"></div>
</div>
</body>
</html>
Loading
Loading