Skip to content

Commit 397516e

Browse files
author
pipeline
committed
v30.1.37 is released
1 parent 32c3807 commit 397516e

629 files changed

Lines changed: 33517 additions & 5301 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@
131131
"dropdown-button",
132132
"virtualize",
133133
"textarea",
134-
"keytip"
134+
"keytip",
135+
null
135136
]
136137
}

‎index.html‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
<meta name="viewport" content="width=device-width, initial-scale=1">
2222
<meta name="referrer" content="never"/>
2323
<title>Demos, Examples of Syncfusion React UI Components</title>
24-
<link rel="manifest" href="./manifest.webmanifest">
2524
<link href="src/common/lib/content/roboto.css" rel="stylesheet">
2625
<link href="src/common/lib/content/bootstrap.min.css" rel="stylesheet" />
2726
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"></link>
@@ -48,12 +47,64 @@
4847
</head>
4948

5049
<body class='e-view'>
50+
<div
51+
class="promo-banner"
52+
role="banner"
53+
style="
54+
background-color:#075193;
55+
position: relative;
56+
z-index: 1001;
57+
padding: 8px 16px;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
text-align: center;">
62+
<svg
63+
class="promo-icon"
64+
role="presentation"
65+
xmlns="http://www.w3.org/2000/svg"
66+
color="#61dafb"
67+
width="16px"
68+
height="16px"
69+
viewBox="-11.5 -10.23174 23 20.46348"
70+
style="margin-right: 8px;">
71+
<title>React Logo</title>
72+
<circle cx="0" cy="0" r="2.05" fill="currentcolor" />
73+
<g stroke="currentcolor" stroke-width="1" fill="none">
74+
<ellipse rx="11" ry="4.2" />
75+
<ellipse rx="11" ry="4.2" transform="rotate(60)" />
76+
<ellipse rx="11" ry="4.2" transform="rotate(120)" />
77+
</g>
78+
</svg>
79+
<span
80+
class="promo-text"
81+
style="
82+
color:#ffff;
83+
font-family: 'Segoe UI';
84+
font-weight: 600;
85+
font-size: 12px;
86+
line-height: 16px;
87+
display: inline;">
88+
15+ Modern Pure React UI components for 2X faster development
89+
<a
90+
href="https://react.syncfusion.com/getting-started/introduction"
91+
class="promo-link"
92+
style="
93+
color: #FFBF2A;
94+
font-weight: bold;
95+
text-decoration: none;
96+
margin-left: 4px;">
97+
Explore demos →
98+
</a>
99+
</span>
100+
</div>
51101
<!-- Google Tag Manager (noscript) -->
52102
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W8WD8WN" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
53103
<!-- End Google Tag Manager (noscript) -->
54104
<div hidden id="sync-analytics" data-queue="EJ2 - React - Demos"></div>
105+
55106
<aside id='left-sidebar' role="complementary" aria-labelledby="sb-toggle-left">
56-
<div class='sb-left-pane e-view'>
107+
<div class='sb-left-pane e-view e-banner-top'>
57108
<div class="sb-left-pane-header">
58109
<div class="sb-header-top">
59110
<div class="sb-ej2">
@@ -88,10 +139,14 @@
88139
<div class="sb-mobile-right-pane-close sb-icons"></div>
89140
</div>
90141
</aside>
91-
<div class="sample-browser e-view">
142+
143+
<div class="sample-browser e-view e-banner-top">
92144
<div class="sb-mobile-overlay sb-hide"></div>
93-
94-
<div id='sample-header' class="sb-header e-view" role="banner">
145+
<div class="sb-token-header sb-hide" role="banner">
146+
<div class="banner-message"></div>
147+
<div class="close-button" role="button">×</div>
148+
</div>
149+
<div id='sample-header' class="sb-header e-view e-banner-top" role="banner">
95150
<div class='sb-header-left sb-left sb-table'>
96151
<div class='sb-header-item sb-table-cell'>
97152
<div id="sb-toggle-left" role="button" tabindex="0" class="sb-slide-nav sb-icons toggle-active sb-icon-Hamburger" aria-label="Toggle all controls navigation" aria-controls="left-sidebar" title='toggle left pane'></div>
@@ -332,8 +387,8 @@
332387
</div>
333388
</div>
334389
</div>
335-
<div class="sb-content e-view">
336-
<div class='sb-right-pane e-view' id='right-pane'>
390+
<div class="sb-content e-view e-banner-top">
391+
<div class='sb-right-pane e-view e-banner-top' id='right-pane'>
337392
<div class="sb-content-overlay">
338393
<div class="sb-loading">
339394
<svg class="circular" height="40" width="40">
@@ -416,14 +471,14 @@ <h1 class='sb-sample-text' role="heading" aria-level="1"></h1>
416471
</div>
417472
</div>
418473
</div>
419-
<div class="sb-body-overlay e-view">
474+
<div class="sb-body-overlay e-view e-banner-top">
420475
<div class="sb-loading">
421476
<svg class="circular" height="40" width="40">
422477
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
423478
</svg>
424479
</div>
425480
</div>
426-
<div class="e-search-overlay sb-hide">
481+
<div class="e-search-overlay e-banner-top sb-hide">
427482
<div class='sb-search-input' id='search-input-wrapper' data-value=''>
428483
<input type='text' class="e-icons" id='search-input' onkeyup='this.parentElement.setAttribute("data-value",this.value)' class='e-icons' placeholder="Search here..." />
429484
<span class='e-icons sb-reset-icon'></span>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@syncfusion/ej2-react-samples",
3-
"version": "29.1.33",
3+
"version": "30.1.37",
44
"description": "Examples of React UI Components",
55
"author": "Syncfusion Inc.",
66
"license": "SEE LICENSE IN license",
@@ -44,6 +44,7 @@
4444
"@syncfusion/ej2-react-image-editor": "*",
4545
"@syncfusion/ej2-react-multicolumn-combobox": "*",
4646
"@syncfusion/ej2-react-interactive-chat": "*",
47+
"@syncfusion/ej2-react-blockeditor": "*",
4748
"react": "18.3.0",
4849
"react-dom": "18.3.0",
4950
"react-router-dom": "6.16.0"

‎sampleName.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,14 @@
6767
"datamatrix": "Data Matrix"
6868
}
6969
},
70+
"block-editor": {
71+
"ControlName": "Block Editor",
72+
"Samples": {
73+
"overview":"Overview",
74+
"api": "API",
75+
"events": "Events"
76+
}
77+
},
7078
"bullet-chart": {
7179
"ControlName": "BulletChart",
7280
"Samples": {
@@ -820,7 +828,8 @@
820828
"esigning-pdf-forms": "eSigning PDF Forms",
821829
"annotations": "Annotations",
822830
"hand-written": "Handwritten Signature",
823-
"invisible-signature": "Invisible Signature"
831+
"invisible-signature": "Invisible Signature",
832+
"programmatic-operations": "Programmatic Operations"
824833
}
825834
},
826835
"pivot-table": {
@@ -924,6 +933,7 @@
924933
"default":"Default Functionalities",
925934
"custom-views": "Custom Views",
926935
"streaming": "Streaming Response",
936+
"attachments": "File Attachments",
927937
"template": "Template",
928938
"dialog": "Dialog"
929939
}

‎src/ai-assistview/attachments-functional.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import * as ReactDOM from 'react-dom';
2+
import * as React from 'react';
3+
import { useEffect, useRef } from 'react';
4+
import { updateSampleSection } from '../common/sample-base';
5+
import './attachments.css';
6+
import { AIAssistViewComponent, PromptModel, PromptRequestEventArgs, ToolbarSettingsModel } from '@syncfusion/ej2-react-interactive-chat';
7+
import * as data from './promptResponseData.json';
8+
9+
const Attachments = () => {
10+
useEffect(() => {
11+
updateSampleSection();
12+
}, []);
13+
14+
const promptsData: PromptModel[] = [
15+
{
16+
response: "Ask Questions, to better understand how your prompt interacts with AI-generated or default data responses..!"
17+
}
18+
];
19+
20+
const prompts:{ [key: string]: string | string[] } [] = data["defaultPromptResponseData"];
21+
22+
const suggestion: string[] = data["defaultSuggestions"];
23+
24+
const toolbarItemClicked = (args) => {
25+
if (args.item.iconCss === 'e-icons e-refresh') {
26+
assistInstance.current.prompts = [];
27+
assistInstance.current.promptSuggestions = suggestion;
28+
}
29+
};
30+
31+
const assistViewToolbarSettings: ToolbarSettingsModel = {
32+
items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ],
33+
itemClicked: toolbarItemClicked
34+
};
35+
36+
const bannerTemplate: string = `<div class="banner-content">
37+
<div class="e-icons e-assistview-icon"></div>
38+
<h3>AI Assistance</h3>
39+
<i>Type your message or attach files to get started.</i>
40+
</div>`;
41+
42+
const attachmentSettings = {
43+
saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save',
44+
removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove'
45+
};
46+
47+
48+
const assistInstance = useRef<AIAssistViewComponent>(null);
49+
const promptRequest = (args: PromptRequestEventArgs) => {
50+
setTimeout(function () {
51+
var foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
52+
var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
53+
54+
assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
55+
assistInstance.current.promptSuggestions = foundPrompt?.suggestions as string [] || suggestion;
56+
}, 2000);
57+
}
58+
return(
59+
<div className='control-pane'>
60+
<div className="control-section">
61+
<div className="attachment-aiassistview">
62+
<AIAssistViewComponent id="aiAssistView" promptSuggestions={suggestion} toolbarSettings={assistViewToolbarSettings} promptRequest={promptRequest} ref={assistInstance} enableAttachments={true} attachmentSettings= {attachmentSettings} bannerTemplate={bannerTemplate}></AIAssistViewComponent>
63+
</div>
64+
</div>
65+
66+
<div id="action-description">
67+
<p>This sample demonstrates how users can attach files while interacting with the AI AssistView. The control enables file uploads to enhance the context of conversations and responses.</p>
68+
</div>
69+
<div id="description">
70+
<p>In this example, the <code>enableAttachments</code> property is set to <code>true</code> to enable file attachments. By, using the <code>attachmentSettings</code> configure the <code>saveUrl</code> and <code>removeUrl</code> to allow file uploads for the attached files. Additionally, the <code>bannerTemplate</code> customizes the banner message, and <code>toolbarSettings</code> includes a right-aligned <code>Refresh</code> button. The <code>promptSuggestions</code> feature offers suggested prompts, while <code>promptRequest</code> handles user queries.</p>
71+
</div>
72+
</div>
73+
);
74+
}
75+
export default Attachments;

‎src/ai-assistview/attachments.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.attachment-aiassistview {
2+
height: 600px;
3+
width: 60vw;
4+
margin: 0 auto;
5+
}
6+
7+
.attachment-aiassistview .banner-content .e-assistview-icon:before {
8+
font-size: 35px;
9+
}
10+
11+
.attachment-aiassistview .banner-content {
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: center;
15+
height: 330px;
16+
text-align: center;
17+
}
18+
19+
@media only screen and (max-width: 750px) {
20+
.attachment-aiassistview {
21+
width: 100%;
22+
}
23+
}

‎src/ai-assistview/attachments.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import * as ReactDOM from 'react-dom';
2+
import * as React from 'react';
3+
import { AIAssistViewComponent, PromptModel, PromptRequestEventArgs, ToolbarSettingsModel } from '@syncfusion/ej2-react-interactive-chat';
4+
import { SampleBase } from '../common/sample-base';
5+
import * as data from './promptResponseData.json';
6+
import './attachments.css';
7+
8+
export class Attachments extends SampleBase<{}, {}> {
9+
promptsData: PromptModel[] = [
10+
{
11+
response: "Ask Questions, to better understand how your prompt interacts with AI-generated or default data responses..!"
12+
}
13+
];
14+
prompts: { [key: string]: string | string[] } [] = data["defaultPromptResponseData"];
15+
16+
suggestion: string [] = data["defaultSuggestions"];
17+
18+
toolbarItemClicked = (args) => {
19+
if (args.item.iconCss === 'e-icons e-refresh') {
20+
this.assistInstance.prompts = [];
21+
this.assistInstance.promptSuggestions = this.suggestion;
22+
}
23+
}
24+
25+
assistViewToolbarSettings: ToolbarSettingsModel = {
26+
items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ],
27+
itemClicked: this.toolbarItemClicked
28+
29+
};
30+
31+
assistInstance: AIAssistViewComponent;
32+
33+
bannerTemplate: string = `<div class="banner-content">
34+
<div class="e-icons e-assistview-icon"></div>
35+
<h3>AI Assistance</h3>
36+
<i>Type your message or attach files to get started.</i>
37+
</div>`;
38+
39+
attachmentSettings = {
40+
saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save',
41+
removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove'
42+
};
43+
44+
45+
promptRequest = (args: PromptRequestEventArgs) => {
46+
setTimeout(() => {
47+
var foundPrompt = this.prompts.find((promptObj) => promptObj.prompt === args.prompt);
48+
var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
49+
this.assistInstance.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
50+
this.assistInstance.promptSuggestions = foundPrompt?.suggestions as string []|| this.suggestion;
51+
}, 2000);
52+
};
53+
render() {
54+
55+
return (
56+
<div className='control-pane'>
57+
<div className="control-section">
58+
<div className="attachment-aiassistview">
59+
<AIAssistViewComponent id="aiAssistView" toolbarSettings={this.assistViewToolbarSettings} bannerTemplate={this.bannerTemplate} promptSuggestions={this.suggestion} enableAttachments={true} attachmentSettings={this.attachmentSettings} promptRequest={this.promptRequest} ref={aiassistView => (this.assistInstance = aiassistView)}></AIAssistViewComponent>
60+
</div>
61+
</div>
62+
63+
<div id="action-description">
64+
<p>This sample demonstrates how users can attach files while interacting with the AI AssistView. The control enables file uploads to enhance the context of conversations and responses.</p>
65+
</div>
66+
<div id="description">
67+
<p>In this example, the <code>enableAttachments</code> property is set to <code>true</code> to enable file attachments. By, using the <code>attachmentSettings</code> configure the <code>saveUrl</code> and <code>removeUrl</code> to allow file uploads for the attached files. Additionally, the <code>bannerTemplate</code> customizes the banner message, and <code>toolbarSettings</code> includes a right-aligned <code>Refresh</code> button. The <code>promptSuggestions</code> feature offers suggested prompts, while <code>promptRequest</code> handles user queries.</p>
68+
</div>
69+
</div>
70+
)
71+
}
72+
}

‎src/ai-assistview/config.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export const AIAssistViewSampleOrder: Object = [
3030
'name': 'Streaming Response',
3131
'description':'Showcases the AI AssistView component in React, highlighting the streaming support how response is updated in chunks.',
3232
'order': '01',
33-
'type': 'new',
3433
'category': 'AI AssistView',
3534
'api':'{"AIAssitView": ["promptRequest", "promptSuggestions", "bannerTemplate", "toolbarSettings"] }',
3635
'sourceFiles': [
@@ -39,6 +38,20 @@ export const AIAssistViewSampleOrder: Object = [
3938
{ 'displayName': 'promptResponseData.json', 'path': 'src/ai-assistview/promptResponseData.json' }
4039
]
4140
},
41+
{ 'path': 'ai-assistview/attachments',
42+
'component': 'Attachments',
43+
'name': 'File Attachments',
44+
'type': 'new',
45+
'description':'Shows the AiAssistView component integrated with attachments, demonstrating how it interacts and fits within a larger system.',
46+
'order': '01',
47+
'category': 'Integration',
48+
'api':'{"AIAssistViewComponent":["promptRequest", "promptSuggestions", "bannerTemplate", "toolbarSettings", "attachmentSettings", "enableAttachments"] }',
49+
'sourceFiles': [
50+
{ 'displayName': 'attachments.tsx', 'path': 'src/ai-assistview/attachments.tsx' },
51+
{ 'displayName': 'attachments.jsx', 'path': 'src/ai-assistview/attachments.jsx' },
52+
{ 'displayName': 'promptResponseData.json', 'path': 'src/ai-assistview/promptResponseData.json' }
53+
]
54+
},
4255
{ 'path': 'ai-assistview/template',
4356
'component': 'Template',
4457
'name': 'Template',
@@ -65,4 +78,5 @@ export const AIAssistViewSampleOrder: Object = [
6578
{ 'displayName': 'promptResponseData.json', 'path': 'src/ai-assistview/promptResponseData.json' }
6679
]
6780
}
81+
6882
]

0 commit comments

Comments
 (0)