Skip to content

Commit 9a2412e

Browse files
dimodiyordan-mitev
dimodi
and
yordan-mitev
authored
docs(Chat): Add IChatClient integration (#3446)
* docs(Chat): Add IChatClient integration info * Revamp examples * Update components/chat/integrations.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * doc(Chat): Revamp examples and Suggestions page * Polish examples and update IChatClient info --------- Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
1 parent 923eca8 commit 9a2412e

8 files changed

Lines changed: 603 additions & 562 deletions

File tree

‎_contentTemplates/chat/general.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#messagecs
2+
public class Message
3+
{
4+
public string Id { get; set; } = Guid.NewGuid().ToString();
5+
public string AuthorId { get; set; } = string.Empty;
6+
public string AuthorName { get; set; } = string.Empty;
7+
public string AuthorImageUrl { get; set; } = string.Empty;
8+
public IEnumerable<FileSelectFileInfo> Files { get; set; } = new List<FileSelectFileInfo>();
9+
public bool IsDeleted { get; set; }
10+
public bool IsPinned { get; set; }
11+
public bool IsTyping { get; set; }
12+
public string ReplyToId { get; set; } = string.Empty;
13+
public string Status { get; set; } = string.Empty;
14+
public List<string> SuggestedActions { get; set; } = new();
15+
public string Text { get; set; } = string.Empty;
16+
public DateTime Timestamp { get; set; } = DateTime.Now;
17+
}
18+
#end

‎components/chat/data-binding.md‎

Lines changed: 62 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -14,80 +14,48 @@ The Telerik UI for Blazor Chat component supports data binding to collections of
1414

1515
## Bind to Data
1616

17-
To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where `T` represents your message model.
17+
To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where `T` represents your message model. The Chat items have features that map to properties in the model. The following example uses property model names that work automatically, with no [additional field mapping](#field-mapping).
1818

19-
>caption Basic data binding
19+
>caption Chat basic data binding
2020
21-
````Razor
21+
````RAZOR
2222
<TelerikChat Data="@ChatData"
2323
AuthorId="@CurrentUserId"
24-
OnSendMessage="@OnChatSendMessage">
24+
OnSendMessage="@OnChatSendMessage"
25+
Height="90vh">
2526
</TelerikChat>
2627
2728
@code {
28-
#region Component Parameters
29-
30-
private List<ChatMessage> ChatData { get; set; }
29+
private List<Message> ChatData { get; set; } = new();
3130
private string CurrentUserId { get; set; } = "user1";
3231
33-
#endregion
34-
35-
#region Lifecycle Methods
36-
3732
protected override void OnInitialized()
3833
{
39-
ChatData = new List<ChatMessage>();
34+
ChatData = new List<Message>();
4035
4136
for (int i = 1; i <= 2; i++)
4237
{
43-
ChatData.Add(new ChatMessage
38+
ChatData.Add(new Message
4439
{
45-
Id = i.ToString(),
4640
Text = i == 1 ? "Hello!" : "Hi there!",
47-
AuthorId = i == 1 ? "user1" : "user2",
48-
Timestamp = DateTime.Now.AddMinutes(-5 + (i * 2))
41+
AuthorId = i == 1 ? CurrentUserId : "user2",
42+
Timestamp = DateTime.Now.AddMinutes(-5 + i)
4943
});
5044
}
5145
}
5246
53-
#endregion
54-
55-
#region Methods
56-
5747
private void OnChatSendMessage(ChatSendMessageEventArgs args)
5848
{
59-
var newMessage = new ChatMessage
49+
var newMessage = new Message
6050
{
61-
Id = Guid.NewGuid().ToString(),
6251
Text = args.Message,
63-
AuthorId = CurrentUserId,
64-
Timestamp = DateTime.Now
52+
AuthorId = CurrentUserId
6553
};
6654
6755
ChatData.Add(newMessage);
6856
}
69-
70-
#endregion
71-
72-
#region Class Declarations
7357
74-
public class ChatMessage
75-
{
76-
public string Id { get; set; }
77-
public string AuthorId { get; set; }
78-
public string AuthorName { get; set; }
79-
public string AuthorImageUrl { get; set; }
80-
public string Text { get; set; }
81-
public string MessageToReplyId { get; set; }
82-
public string Status { get; set; }
83-
public bool IsDeleted { get; set; }
84-
public bool IsPinned { get; set; }
85-
public DateTime Timestamp { get; set; }
86-
public List<string> SuggestedActions { get; set; }
87-
public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
88-
}
89-
90-
#endregion
58+
@[template](/_contentTemplates/chat/general.md#messagecs)
9159
}
9260
````
9361

@@ -97,88 +65,83 @@ The Chat component provides field mapping parameters to work with different data
9765

9866
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
9967

100-
| Parameter | Description | Default Value |
68+
| Property Name | Description | Default Value |
10169
|-----------|-------------|---------------|
102-
| `TextField` | Field containing message text content | `"Text"` |
103-
| `AuthorIdField` | Field containing the author/user ID | `"AuthorId"` |
104-
| `AuthorImageUrlField` | Field containing the author/user avatar image | `"AuthorImageUrl"` |
105-
| `AuthorNameField` | Field containing the author display name | `"AuthorName"` |
106-
| `TimestampField` | Field containing the message timestamp | `"Timestamp"` |
107-
| `IdField` | Field containing the unique message ID | `"Id"` |
108-
| `FilesField` | Field containing file attachments | `"Files"` |
109-
| `StatusField` | Field containing message status | `"Status"` |
110-
| `IsDeletedField` | Field indicating if message is deleted | `"IsDeleted"` |
111-
| `IsPinnedField` | Field indicating if message is pinned | `"IsPinned"` |
112-
| `ReplyToIdField` | Field containing the ID of replied message | `"ReplyToId"` |
113-
| `SuggestedActionsField` | Field containing suggested actions | `"SuggestedActions"` |
70+
| `TextField` | The message text content | `"Text"` |
71+
| `AuthorIdField` | The author/user ID | `"AuthorId"` |
72+
| `AuthorImageUrlField` | The author/user avatar image | `"AuthorImageUrl"` |
73+
| `AuthorNameField` | The author display name | `"AuthorName"` |
74+
| `TimestampField` | The message timestamp | `"Timestamp"` |
75+
| `IdField` | the unique message ID | `"Id"` |
76+
| `FilesField` | File attachments | `"Files"` |
77+
| `StatusField` | Message status | `"Status"` |
78+
| `IsDeletedField` | Indicates if the message is deleted | `"IsDeleted"` |
79+
| `IsPinnedField` | Iindicaties if the message is pinned | `"IsPinned"` |
80+
| `ReplyToIdField` | The ID of replied message | `"ReplyToId"` |
81+
| `SuggestedActionsField` | Predefined quick replies | `"SuggestedActions"` |
82+
83+
>caption Using custom Chat model property names
84+
85+
````RAZOR.skip-repl
86+
<TelerikChat AuthorIdField="@nameof(Message.UserId)"
87+
AuthorNameField="@nameof(Message.UserName)"
88+
TextField="@nameof(Message.Content)">
89+
</TelerikChat>
90+
91+
@code {
92+
public class Message
93+
{
94+
public string Id { get; set; } = Guid.NewGuid().ToString();
95+
public string UserId { get; set; } = string.Empty;
96+
public string UserName { get; set; } = string.Empty;
97+
public string Content { get; set; } = string.Empty;
98+
public DateTime Timestamp { get; set; } = DateTime.Now;
99+
public string Status { get; set; } = "Sent";
100+
}
101+
}
102+
````
114103

115104
## Dynamic Updates
116105

117-
The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically:
106+
The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically.
107+
108+
````RAZOR
109+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
110+
OnClick="@OnAddSystemMessageClick">Add System Message</TelerikButton>
111+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
112+
OnClick="@OnClearMessagesClick">Clear All Messages</TelerikButton>
118113
119-
````Razor
120114
<TelerikChat @ref="@ChatRef"
121115
Data="@ChatData"
122-
TextField="@nameof(ChatMessage.Content)"
123116
AuthorId="@CurrentUserId"
124117
OnSendMessage="@OnChatSendMessage">
125118
</TelerikChat>
126119
127-
<div style="margin-top: 20px;">
128-
<TelerikButton OnClick="@OnAddSystemMessageClick">Add System Message</TelerikButton>
129-
<TelerikButton OnClick="@OnClearMessagesClick">Clear All Messages</TelerikButton>
130-
</div>
131-
132120
@code {
133-
#region Component References
134-
135-
private TelerikChat<ChatMessage> ChatRef { get; set; }
136-
137-
#endregion
121+
private TelerikChat<Message>? ChatRef { get; set; }
138122
139-
#region Component Parameters
140-
141-
private List<ChatMessage> ChatData { get; set; }
123+
private List<Message> ChatData { get; set; } = new();
142124
private string CurrentUserId { get; set; } = "user1";
143-
144-
#endregion
145-
146-
#region Lifecycle Methods
147-
148-
protected override void OnInitialized()
149-
{
150-
ChatData = new List<ChatMessage>();
151-
}
152-
153-
#endregion
154-
155-
#region Methods
156125
157126
private void OnChatSendMessage(ChatSendMessageEventArgs args)
158127
{
159-
var newMessage = new ChatMessage
128+
var newMessage = new Message
160129
{
161-
Id = Guid.NewGuid().ToString(),
162-
Content = args.Message,
163130
AuthorId = CurrentUserId,
164-
AuthorName = "User",
165-
Timestamp = DateTime.Now
131+
AuthorName = "User 1",
132+
Text = args.Message
166133
};
167134
168135
ChatData.Add(newMessage);
169-
170-
ChatRef?.Refresh();
171136
}
172137
173138
private void OnAddSystemMessageClick()
174139
{
175-
ChatData.Add(new ChatMessage
140+
ChatData.Add(new Message
176141
{
177-
Id = Guid.NewGuid().ToString(),
178-
Content = "System notification: New user joined the chat",
179142
AuthorId = "system",
180143
AuthorName = "System",
181-
Timestamp = DateTime.Now
144+
Text = "System notification: New user joined the chat"
182145
});
183146
184147
ChatRef?.Refresh();
@@ -189,23 +152,8 @@ The Chat component automatically reflects changes to the bound data collection.
189152
ChatData.Clear();
190153
ChatRef?.Refresh();
191154
}
192-
193-
#endregion
194-
195-
#region Class Declarations
196155
197-
public class ChatMessage
198-
{
199-
public string Id { get; set; }
200-
public string AuthorId { get; set; }
201-
public string AuthorName { get; set; }
202-
public string Content { get; set; }
203-
public DateTime Timestamp { get; set; }
204-
public string Status { get; set; }
205-
public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
206-
}
207-
208-
#endregion
156+
@[template](/_contentTemplates/chat/general.md#messagecs)
209157
}
210158
````
211159

0 commit comments

Comments
 (0)