Skip to content

Commit 6868d74

Browse files
author
Ruslan Farkhutdinov
committed
Chat: Add File Attachments demo
1 parent c214744 commit 6868d74

File tree

6 files changed

+199
-0
lines changed

6 files changed

+199
-0
lines changed

‎apps/demos/Demos/Chat/FileAttachments/client-script.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
MockDate.set(new Date('2025/05/05 16:35:10'));

‎apps/demos/Demos/Chat/FileAttachments/jQuery/data.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const getTimestamp = function (date, offsetMinutes = 0) {
2+
return date.getTime() + offsetMinutes * 60000;
3+
};
4+
5+
const date = new Date();
6+
date.setHours(0, 0, 0, 0);
7+
8+
const currentUser = {
9+
id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
10+
name: 'John Doe',
11+
};
12+
13+
const supportAgent = {
14+
id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3',
15+
name: 'Support Agent',
16+
avatarUrl: '../../../../images/petersmith.png',
17+
};
18+
19+
const messages = [
20+
{
21+
id: new DevExpress.data.Guid(),
22+
timestamp: getTimestamp(date, -9),
23+
author: supportAgent,
24+
text: 'Hello, John!\nHow can I assist you today?',
25+
},
26+
{
27+
id: new DevExpress.data.Guid(),
28+
timestamp: getTimestamp(date, -7),
29+
author: currentUser,
30+
text: "Hi, I'm having trouble accessing my account.\nIt says my password is incorrect. I’ve attached some screenshots for you to check.",
31+
attachments: [
32+
{
33+
name: 'Screenshot1.jpg',
34+
size: 0,
35+
},
36+
{
37+
name: 'Screenshot2.jpg',
38+
size: 0,
39+
},
40+
{
41+
name: 'Screenshot3.jpg',
42+
size: 0,
43+
},
44+
],
45+
},
46+
{
47+
id: new DevExpress.data.Guid(),
48+
timestamp: getTimestamp(date, -7),
49+
author: supportAgent,
50+
text: 'Thanks for the screenshots! I can help you with that. Please refer to the attached file for instructions to restore access.',
51+
attachments: [
52+
{
53+
name: 'Instructions.pdf',
54+
size: 0,
55+
},
56+
],
57+
},
58+
];
59+
60+
const editingOptions = [
61+
{ text: 'Enabled', key: 'enabled' },
62+
{ text: 'Disabled', key: 'disabled' },
63+
{ text: 'Only the last message (custom)', key: 'custom' },
64+
];

‎apps/demos/Demos/Chat/FileAttachments/jQuery/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
8+
<script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
9+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
10+
<script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
11+
<link rel="stylesheet" type="text/css" href="styles.css" />
12+
<script src="data.js"></script>
13+
<script src="index.js"></script>
14+
</head>
15+
<body class="dx-viewport">
16+
<div class="demo-container">
17+
<div class="chat-container">
18+
<div id="chat"></div>
19+
</div>
20+
</div>
21+
</body>
22+
</html>

‎apps/demos/Demos/Chat/FileAttachments/jQuery/index.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
$(() => {
2+
const customStore = new DevExpress.data.CustomStore({
3+
key: 'id',
4+
load: async () => messages,
5+
insert: async (message) => {
6+
messages.push(message);
7+
return message;
8+
},
9+
});
10+
11+
const dataSource = new DevExpress.data.DataSource({
12+
store: customStore,
13+
paginate: false,
14+
});
15+
16+
$('#chat').dxChat({
17+
height: 600,
18+
dataSource,
19+
reloadOnChange: false,
20+
user: currentUser,
21+
fileUploaderOptions: {
22+
uploadUrl: 'https://js.devexpress.com/Demos/NetCore/FileUploader/Upload',
23+
},
24+
onMessageEntered(e) {
25+
const { message } = e;
26+
27+
dataSource.store().push([{
28+
type: 'insert',
29+
data: {
30+
id: new DevExpress.data.Guid(),
31+
...message,
32+
},
33+
}]);
34+
},
35+
onMessageDeleted(e) {
36+
const { message } = e;
37+
38+
dataSource.store().push([{
39+
type: 'update',
40+
key: message.id,
41+
data: { isDeleted: true },
42+
}]);
43+
},
44+
onMessageUpdated(e) {
45+
const { message, text } = e;
46+
47+
dataSource.store().push([{
48+
type: 'update',
49+
key: message.id,
50+
data: { text, isEdited: true },
51+
}]);
52+
},
53+
onAttachmentDownloadClick(e) {
54+
console.log(e);
55+
},
56+
}).dxChat('instance');
57+
});

‎apps/demos/Demos/Chat/FileAttachments/jQuery/styles.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.demo-container {
2+
min-width: 720px;
3+
display: flex;
4+
gap: 20px;
5+
}
6+
7+
.chat-container {
8+
display: flex;
9+
flex-grow: 1;
10+
align-items: center;
11+
justify-content: center;
12+
}
13+
14+
.options {
15+
padding: 20px;
16+
display: flex;
17+
flex-direction: column;
18+
min-width: 280px;
19+
background-color: rgba(191, 191, 191, 0.15);
20+
gap: 16px;
21+
}
22+
23+
.dx-chat {
24+
max-width: 480px;
25+
}
26+
27+
.caption {
28+
font-size: var(--dx-font-size-sm);
29+
font-weight: 500;
30+
}
31+
32+
.dx-avatar {
33+
border: 1px solid var(--dx-color-border);
34+
}

‎apps/demos/menuMeta.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4111,6 +4111,27 @@
41114111
}
41124112
]
41134113
},
4114+
{
4115+
"Name": "File Attachments",
4116+
"Equivalents": "Files Sending, Messages with files, Files Attached, Message Attachments, Document Attachments",
4117+
"Demos": [
4118+
{
4119+
"Title": "File Attachments",
4120+
"Name": "FileAttachments",
4121+
"Widget": "Chat",
4122+
"DemoType": "Web",
4123+
"DocUrl": "",
4124+
"MvcDescription": "",
4125+
"NetCoreDescription": "",
4126+
"MvcAdditionalFiles": [
4127+
"/Models/SampleData/ChatData.cs",
4128+
"/Models/Chat/User.cs",
4129+
"/Models/Chat/Message.cs",
4130+
"/ViewModels/ChatViewModel.cs"
4131+
]
4132+
}
4133+
]
4134+
},
41144135
{
41154136
"Name": "Customization",
41164137
"Equivalents": "Settings, Options",

0 commit comments

Comments
 (0)