@product7/feedback-sdk 1.3.7 → 1.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/feedback-sdk.js +3006 -2817
  2. package/dist/feedback-sdk.js.map +1 -1
  3. package/dist/feedback-sdk.min.js +1 -1
  4. package/dist/feedback-sdk.min.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/api/services/MessengerService.js +8 -2
  7. package/src/core/APIService.js +33 -14
  8. package/src/index.js +1 -1
  9. package/src/styles/base.js +1 -1
  10. package/src/styles/changelog.js +58 -40
  11. package/src/styles/components.js +19 -2
  12. package/src/styles/design-tokens.js +4 -4
  13. package/src/styles/feedback.js +3 -8
  14. package/src/styles/messenger-components.js +473 -0
  15. package/src/styles/messenger-core.js +37 -268
  16. package/src/styles/messenger-features.js +89 -267
  17. package/src/styles/messenger-views.js +391 -325
  18. package/src/styles/messenger.js +17 -558
  19. package/src/styles/styles.js +21 -24
  20. package/src/styles/{surveys.js → survey.js} +55 -20
  21. package/src/widgets/BaseWidget.js +1 -1
  22. package/src/widgets/ButtonWidget.js +1 -1
  23. package/src/widgets/ChangelogWidget.js +1 -1
  24. package/src/widgets/InlineWidget.js +1 -1
  25. package/src/widgets/MessengerWidget.js +74 -84
  26. package/src/widgets/SurveyWidget.js +1 -1
  27. package/src/widgets/TabWidget.js +1 -1
  28. package/src/widgets/messenger/MessengerState.js +50 -119
  29. package/src/widgets/messenger/components/MessengerLauncher.js +22 -18
  30. package/src/widgets/messenger/components/MessengerPanel.js +1 -1
  31. package/src/widgets/messenger/components/NavigationTabs.js +36 -15
  32. package/src/widgets/messenger/views/ChangelogView.js +8 -32
  33. package/src/widgets/messenger/views/ChatView.js +83 -219
  34. package/src/widgets/messenger/views/ConversationsView.js +67 -45
  35. package/src/widgets/messenger/views/HelpView.js +22 -32
  36. package/src/widgets/messenger/views/HomeView.js +58 -40
  37. package/src/widgets/messenger/views/PreChatFormView.js +47 -51
  38. package/src/styles/messenger-help.js +0 -298
  39. package/src/styles/messenger-themes.js +0 -500
@@ -1,133 +1,102 @@
1
- /**
2
- * MessengerState - State management for the Messenger widget
3
- */
4
1
  export class MessengerState {
5
- constructor(options = {}) {
6
- this.currentView = 'home';
7
- this.isOpen = false;
8
- this.unreadCount = 0;
9
- this.activeConversationId = null;
10
-
11
- // Conversations
12
- this.conversations = [];
13
- this.messages = {};
14
-
15
- // Help articles
16
- this.helpArticles = [];
17
- this.helpSearchQuery = '';
18
-
19
- // Changelog
20
- this.homeChangelogItems = [];
21
- this.changelogItems = [];
22
-
23
- // Team info
24
- this.teamName = options.teamName || 'Support';
25
- this.teamAvatars = options.teamAvatars || [];
26
- this.welcomeMessage = options.welcomeMessage || 'How can we help?';
27
-
28
- // User info
29
- this.userContext = options.userContext || null;
30
-
31
- // ADD THESE TWO PROPERTIES
32
- this.isIdentified = false; // Track if user has been identified
33
- this.pendingMessage = null; // { content, attachments } - for pre-chat flow
34
-
35
- // Feature flags
36
- this.enableHelp = options.enableHelp !== false;
37
- this.enableChangelog = options.enableChangelog !== false;
38
-
39
- // Agent availability
40
- this.agentsOnline = false;
41
- this.onlineCount = 0;
42
- this.responseTime = 'Usually replies within a few minutes';
43
-
44
- // Typing indicators
45
- this.typingUsers = {};
46
-
47
- // Loading states
48
- this.isLoading = false;
49
- this.isLoadingMessages = false;
50
-
51
- // Listeners
52
- this._listeners = new Set();
53
- }
54
- /**
55
- * Subscribe to state changes
56
- */
2
+ constructor(options = {}) {
3
+ this.currentView = 'home';
4
+ this.isOpen = false;
5
+ this.unreadCount = 0;
6
+ this.activeConversationId = null;
7
+
8
+ this.conversations = [];
9
+ this.messages = {};
10
+
11
+ this.helpArticles = [];
12
+ this.helpSearchQuery = '';
13
+
14
+ this.homeChangelogItems = [];
15
+ this.changelogItems = [];
16
+
17
+ this.teamName = options.teamName || 'Support';
18
+ this.teamAvatars = options.teamAvatars || [];
19
+ this.welcomeMessage = options.welcomeMessage || 'How can we help?';
20
+
21
+ this.userContext = options.userContext || null;
22
+ this.isIdentified = false;
23
+ this.pendingMessage = null;
24
+
25
+ this.enableHelp = options.enableHelp !== false;
26
+ this.enableChangelog = options.enableChangelog !== false;
27
+
28
+ this.agentsOnline = false;
29
+ this.onlineCount = 0;
30
+ this.responseTime = 'Usually replies within a few minutes';
31
+
32
+ this.typingUsers = {};
33
+
34
+ this.isLoading = false;
35
+ this.isLoadingMessages = false;
36
+
37
+ this._listeners = new Set();
38
+ }
39
+
57
40
  subscribe(callback) {
58
41
  this._listeners.add(callback);
59
42
  return () => this._listeners.delete(callback);
60
43
  }
61
44
 
62
- /**
63
- * Notify all listeners of state change
64
- */
65
45
  _notify(changeType, data) {
66
46
  this._listeners.forEach((cb) => cb(changeType, data, this));
67
47
  }
68
48
 
69
- /**
70
- * Set current view
71
- */
72
49
  setView(view) {
73
50
  const previousView = this.currentView;
74
51
  this.currentView = view;
75
52
  this._notify('viewChange', { previousView, currentView: view });
76
53
  }
77
54
 
78
- /**
79
- * Toggle panel open/closed
80
- */
81
55
  setOpen(isOpen) {
82
56
  this.isOpen = isOpen;
83
57
  this._notify('openChange', { isOpen });
84
58
  }
85
59
 
86
- /**
87
- * Set active conversation for chat view
88
- */
89
60
  setActiveConversation(conversationId) {
90
61
  const previousConversationId = this.activeConversationId;
91
62
  this.activeConversationId = conversationId;
92
- this._notify('conversationChange', { conversationId, previousConversationId });
63
+ this._notify('conversationChange', {
64
+ conversationId,
65
+ previousConversationId,
66
+ });
67
+ }
68
+
69
+ setIdentified(isIdentified, userContext = null) {
70
+ this.isIdentified = isIdentified;
71
+ if (userContext) {
72
+ this.userContext = { ...this.userContext, ...userContext };
73
+ }
74
+ this._notify('identificationChange', { isIdentified, userContext });
93
75
  }
94
76
 
95
- /**
96
- * Update conversations list
97
- */
98
77
  setConversations(conversations) {
99
78
  this.conversations = conversations;
100
79
  this._updateUnreadCount();
101
80
  this._notify('conversationsUpdate', { conversations });
102
81
  }
103
82
 
104
- /**
105
- * Add a new conversation
106
- */
107
83
  addConversation(conversation) {
108
84
  this.conversations.unshift(conversation);
109
85
  this._updateUnreadCount();
110
86
  this._notify('conversationAdded', { conversation });
111
87
  }
112
88
 
113
- /**
114
- * Update messages for a conversation
115
- */
116
89
  setMessages(conversationId, messages) {
117
90
  this.messages[conversationId] = messages;
118
91
  this._notify('messagesUpdate', { conversationId, messages });
119
92
  }
120
93
 
121
- /**
122
- * Add a message to a conversation
123
- */
124
94
  addMessage(conversationId, message) {
125
95
  if (!this.messages[conversationId]) {
126
96
  this.messages[conversationId] = [];
127
97
  }
128
98
  this.messages[conversationId].push(message);
129
99
 
130
- // Update conversation preview
131
100
  const conv = this.conversations.find((c) => c.id === conversationId);
132
101
  if (conv) {
133
102
  conv.lastMessage = message.content;
@@ -141,9 +110,6 @@ constructor(options = {}) {
141
110
  this._notify('messageAdded', { conversationId, message });
142
111
  }
143
112
 
144
- /**
145
- * Update a conversation by id
146
- */
147
113
  updateConversation(conversationId, updates) {
148
114
  const conv = this.conversations.find((c) => c.id === conversationId);
149
115
  if (!conv) {
@@ -155,9 +121,6 @@ constructor(options = {}) {
155
121
  return conv;
156
122
  }
157
123
 
158
- /**
159
- * Mark conversation as read
160
- */
161
124
  markAsRead(conversationId) {
162
125
  const conv = this.conversations.find((c) => c.id === conversationId);
163
126
  if (conv && conv.unread > 0) {
@@ -167,9 +130,6 @@ constructor(options = {}) {
167
130
  }
168
131
  }
169
132
 
170
- /**
171
- * Update unread count
172
- */
173
133
  _updateUnreadCount() {
174
134
  this.unreadCount = this.conversations.reduce(
175
135
  (sum, c) => sum + (c.unread || 0),
@@ -178,57 +138,34 @@ constructor(options = {}) {
178
138
  this._notify('unreadCountChange', { count: this.unreadCount });
179
139
  }
180
140
 
181
- /**
182
- * Set help articles
183
- */
184
141
  setHelpArticles(articles) {
185
142
  this.helpArticles = articles;
186
143
  this._notify('helpArticlesUpdate', { articles });
187
144
  }
188
145
 
189
- /**
190
- * Set help search query
191
- */
192
146
  setHelpSearchQuery(query) {
193
147
  this.helpSearchQuery = query;
194
148
  this._notify('helpSearchChange', { query });
195
149
  }
196
150
 
197
- /**
198
- * Set home changelog items
199
- */
200
151
  setHomeChangelogItems(items) {
201
152
  this.homeChangelogItems = items;
202
153
  this._notify('homeChangelogUpdate', { items });
203
154
  }
204
155
 
205
- /**
206
- * Set changelog items
207
- */
208
156
  setChangelogItems(items) {
209
157
  this.changelogItems = items;
210
158
  this._notify('changelogUpdate', { items });
211
159
  }
212
160
 
213
- /**
214
- * Get current conversation
215
- */
216
161
  getActiveConversation() {
217
162
  return this.conversations.find((c) => c.id === this.activeConversationId);
218
163
  }
219
164
 
220
- /**
221
- * Get messages for active conversation
222
- */
223
165
  getActiveMessages() {
224
166
  return this.messages[this.activeConversationId] || [];
225
167
  }
226
168
 
227
- /**
228
- * Update team avatars from backend agent data.
229
- * Converts available_agents ({full_name, picture}) into avatar strings
230
- * the views already support (URL strings or initial strings).
231
- */
232
169
  setTeamAvatarsFromAgents(agents) {
233
170
  if (!agents || agents.length === 0) return;
234
171
 
@@ -239,9 +176,6 @@ constructor(options = {}) {
239
176
  this._notify('teamAvatarsUpdate', { teamAvatars: this.teamAvatars });
240
177
  }
241
178
 
242
- /**
243
- * Get filtered help articles
244
- */
245
179
  getFilteredHelpArticles() {
246
180
  if (!this.helpSearchQuery) {
247
181
  return this.helpArticles;
@@ -255,9 +189,6 @@ constructor(options = {}) {
255
189
  );
256
190
  }
257
191
 
258
- /**
259
- * Reset state
260
- */
261
192
  reset() {
262
193
  this.currentView = 'home';
263
194
  this.activeConversationId = null;
@@ -36,24 +36,28 @@ export class MessengerLauncher {
36
36
  : '';
37
37
 
38
38
  this.element.innerHTML = `
39
- <button class="messenger-launcher-btn" aria-label="Open messenger">
40
- <span class="messenger-launcher-icon messenger-launcher-icon-chat">
41
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
42
- <path d="M144,140a12,12,0,1,1-12-12A12,12,0,0,1,144,140Zm44-12a12,12,0,1,0,12,12A12,12,0,0,0,188,128Zm51.34,83.47a16,16,0,0,1-19.87,19.87l-24.71-7.27A80,80,0,0,1,86.43,183.42a79,79,0,0,1-25.19-7.35l-24.71,7.27a16,16,0,0,1-19.87-19.87l7.27-24.71A80,80,0,1,1,169.58,72.59a80,80,0,0,1,62.49,114.17ZM81.3,166.3a79.94,79.94,0,0,1,70.38-93.87A64,64,0,0,0,39.55,134.19a8,8,0,0,1,.63,6L32,168l27.76-8.17a8,8,0,0,1,6,.63A63.45,63.45,0,0,0,81.3,166.3Zm135.15,15.89a64,64,0,1,0-26.26,26.26,8,8,0,0,1,6-.63L224,216l-8.17-27.76A8,8,0,0,1,216.45,182.19Z"></path>
43
- </svg>
44
- </span>
45
- <span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">
46
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
47
- <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
48
- </svg>
49
- </span>
50
- ${badgeHtml}
51
- </button>
52
- `;
39
+ <button class="messenger-launcher-btn" aria-label="Open messenger">
40
+ <span class="messenger-launcher-icon messenger-launcher-icon-chat">
41
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
42
+ <path d="M144,140a12,12,0,1,1-12-12A12,12,0,0,1,144,140Zm44-12a12,12,0,1,0,12,12A12,12,0,0,0,188,128Zm51.34,83.47a16,16,0,0,1-19.87,19.87l-24.71-7.27A80,80,0,0,1,86.43,183.42a79,79,0,0,1-25.19-7.35l-24.71,7.27a16,16,0,0,1-19.87-19.87l7.27-24.71A80,80,0,1,1,169.58,72.59a80,80,0,0,1,62.49,114.17ZM81.3,166.3a79.94,79.94,0,0,1,70.38-93.87A64,64,0,0,0,39.55,134.19a8,8,0,0,1,.63,6L32,168l27.76-8.17a8,8,0,0,1,6,.63A63.45,63.45,0,0,0,81.3,166.3Zm135.15,15.89a64,64,0,1,0-26.26,26.26,8,8,0,0,1,6-.63L224,216l-8.17-27.76A8,8,0,0,1,216.45,182.19Z"></path>
43
+ </svg>
44
+ </span>
45
+ <span class="messenger-launcher-icon messenger-launcher-icon-close" style="display: none;">
46
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
47
+ <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
48
+ </svg>
49
+ </span>
50
+ ${badgeHtml}
51
+ </button>
52
+ `;
53
53
 
54
- // Set custom primary color if provided
55
- if (this.options.primaryColor) {
56
- this.element.querySelector('.messenger-launcher-btn').style.setProperty('background', this.options.primaryColor);
54
+ const btn = this.element.querySelector('.messenger-launcher-btn');
55
+ if (btn && this.options.primaryColor) {
56
+ btn.style.setProperty(
57
+ 'background',
58
+ this.options.primaryColor,
59
+ 'important'
60
+ );
57
61
  }
58
62
  }
59
63
 
@@ -121,4 +125,4 @@ export class MessengerLauncher {
121
125
  this.element.parentNode.removeChild(this.element);
122
126
  }
123
127
  }
124
- }
128
+ }
@@ -105,4 +105,4 @@ export class MessengerPanel {
105
105
  this.element.parentNode.removeChild(this.element);
106
106
  }
107
107
  }
108
- }
108
+ }
@@ -8,7 +8,7 @@ export class NavigationTabs {
8
8
 
9
9
  render() {
10
10
  this.element = document.createElement('div');
11
- this.element.className = 'messenger-nav';
11
+ this.element.className = 'messenger-panel-nav';
12
12
 
13
13
  this._updateContent();
14
14
  this._attachEvents();
@@ -68,7 +68,22 @@ export class NavigationTabs {
68
68
  })
69
69
  .join('');
70
70
 
71
- this.element.innerHTML = tabsHtml;
71
+ this.element.innerHTML = `
72
+ <div class="messenger-nav-tabs">
73
+ ${tabsHtml}
74
+ </div>
75
+ <div class="messenger-nav-footer">
76
+ <a href="https://product7.io" target="_blank" rel="noopener noreferrer" class="messenger-powered-by">
77
+ <svg width="12" height="14" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
78
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.0615 5.28044C8.5161 4.42949 3.30825 11.1456 5.89967 17.6588C6.9321 20.2538 9.06268 22.2644 11.8777 23.1968C16.2682 24.6507 18.4038 22.3222 19.0483 23.9691C19.4055 24.8894 18.7282 25.3209 17.988 25.4938C10.9146 27.15 5.15304 22.7566 3.5869 17.5531C1.52205 10.6941 5.98684 4.6667 11.3483 3.41065C17.8801 1.88094 24.0325 6.19355 24.3926 12.7175C24.7448 19.0921 18.6217 24.5978 11.927 22.2036C10.8789 21.8285 8.8419 20.6682 8.46823 19.858C8.06026 18.9727 8.80261 18.1725 9.68285 18.3576C10.2223 18.4726 10.3116 18.8706 11.3161 19.5372C14.4549 21.6213 19.1276 20.6132 21.2046 17.0972C23.991 12.3817 21.0481 6.05351 15.06 5.27758L15.0615 5.28044Z" fill="#21244A"/>
79
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.2492 2.19833C11.944 1.71463 8.88819 3.07214 6.91479 4.49682C2.27067 7.85488 0.76169 14.5038 3.49672 19.8731C4.08535 21.0096 4.84379 22.0497 5.7459 22.9576L7.16343 24.2515C7.67214 24.9131 7.27203 25.7176 6.64115 25.9269C5.13502 26.4271 2.0499 21.8172 1.42044 20.5383C0.0872204 17.8297 -0.312889 14.9047 0.242977 11.503C1.66908 2.77063 11.221 -2.51652 19.7197 1.21021C27.7548 4.73331 30.2733 15.4555 23.9351 22.0773C23.3107 22.7296 21.6352 24.4823 20.6278 23.8907C20.0076 23.5263 19.8933 22.6446 20.5192 22.1238C21.0301 21.6986 21.4759 21.435 21.9896 20.9734C23.6665 19.4688 25.2562 16.8752 25.3477 13.5636C25.4427 10.2055 24.1266 7.5848 22.3904 5.74859C20.6392 3.89665 18.6751 2.69919 15.2456 2.19691L15.2492 2.19833Z" fill="#F69F06"/>
80
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M8.48332 27.2217C7.93817 26.265 8.89987 25.3776 10.1352 25.8641C15.5653 27.9926 18.3081 25.5269 19.0255 27.0823C19.2655 27.6039 19.0448 28.1619 18.7354 28.3863C17.9895 28.9257 14.82 28.9343 13.9262 28.8714C12.9071 28.8053 11.897 28.6377 10.9111 28.3713C10.0888 28.1348 8.88057 27.9247 8.48189 27.2281L8.48332 27.2217Z" fill="#21244A"/>
81
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8722 31.0607C15.7765 32.1381 14.579 32.0331 13.5766 31.9545C12.5742 31.8759 11.5203 31.8502 11.601 30.7013C11.6789 29.5882 12.8035 29.7532 13.8274 29.8332C14.4425 29.8811 15.9951 29.681 15.8722 31.0607Z" fill="#21244A"/>
82
+ </svg>
83
+ Powered by <strong>Product7</strong>
84
+ </a>
85
+ </div>
86
+ `;
72
87
  }
73
88
 
74
89
  _attachEvents() {
@@ -103,27 +118,33 @@ export class NavigationTabs {
103
118
  }
104
119
 
105
120
  _getHomeIcon() {
106
- return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
107
- <path d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"></path>
108
- </svg>`;
121
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
122
+ <path d="M40,216H216V120a8,8,0,0,0-2.34-5.66l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,40,120Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
123
+ </svg>`;
109
124
  }
110
125
 
111
126
  _getMessagesIcon() {
112
- return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
113
- <path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78.69.69,0,0,0,.13-.11L82.5,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H82.5a16,16,0,0,0-10.3,3.75l-.12.11L40,224V64H216Z"></path>
114
- </svg>`;
127
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
128
+ <circle cx="128" cy="128" r="12"/>
129
+ <circle cx="84" cy="128" r="12"/>
130
+ <circle cx="172" cy="128" r="12"/>
131
+ <path d="M79.93,211.11a96,96,0,1,0-35-35h0L32.42,213.46a8,8,0,0,0,10.12,10.12l37.39-12.47Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
132
+ </svg>`;
115
133
  }
116
134
 
117
135
  _getHelpIcon() {
118
- return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
119
- <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path>
120
- </svg>`;
136
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
137
+ <circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
138
+ <circle cx="128" cy="180" r="12"/>
139
+ <path d="M128,144v-8a28,28,0,1,0-28-28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
140
+ </svg>`;
121
141
  }
122
142
 
123
143
  _getChangelogIcon() {
124
- return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
125
- <path d="M228.54,86.66l-26.46,23.07A40,40,0,0,0,168,72.13L120.89,46.5a40,40,0,0,0-75.44-4l-22-19.2a8,8,0,0,0-10.5,12L35.44,54.77a40,40,0,0,0,50,61.07l47.1,25.64a40,40,0,0,0,75.41,4.07l26.46-23.07a8,8,0,0,0-10.5-12ZM56,96A24,24,0,1,1,77.25,82.75,24,24,0,0,1,56,96Zm144,64a24,24,0,1,1,24-24A24,24,0,0,1,200,160Z"></path>
126
- </svg>`;
144
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
145
+ <path d="M160,80V200.67a8,8,0,0,0,3.56,6.65l11,7.33a8,8,0,0,0,12.2-4.72L200,160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
146
+ <path d="M40,200a8,8,0,0,0,13.15,6.12C105.55,162.16,160,160,160,160h40a40,40,0,0,0,0-80H160S105.55,77.84,53.15,33.89A8,8,0,0,0,40,40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
147
+ </svg>`;
127
148
  }
128
149
 
129
150
  destroy() {
@@ -134,4 +155,4 @@ export class NavigationTabs {
134
155
  this.element.parentNode.removeChild(this.element);
135
156
  }
136
157
  }
137
- }
158
+ }
@@ -22,30 +22,15 @@ export class ChangelogView {
22
22
  }
23
23
 
24
24
  _updateContent() {
25
- const avatarsHtml = this._renderTeamAvatars();
26
-
27
25
  this.element.innerHTML = `
28
- <div class="messenger-changelog-header">
29
- <h2>Changelog</h2>
30
- <button class="sdk-close-btn" aria-label="Close">
31
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
32
- <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
33
- </svg>
34
- </button>
35
- </div>
26
+ <div class="messenger-changelog-header">
27
+ <h2>Latest Updates</h2>
28
+ </div>
36
29
 
37
- <div class="messenger-changelog-subheader">
38
- <span class="messenger-changelog-latest">Latest</span>
39
- <div class="messenger-changelog-team">
40
- <span>From ${this.state.teamName}</span>
41
- ${avatarsHtml}
42
- </div>
43
- </div>
44
-
45
- <div class="messenger-changelog-body">
46
- <div class="messenger-changelog-list"></div>
47
- </div>
48
- `;
30
+ <div class="messenger-changelog-body">
31
+ <div class="messenger-changelog-list"></div>
32
+ </div>
33
+ `;
49
34
 
50
35
  this._updateChangelogList();
51
36
  this._attachEvents();
@@ -96,9 +81,6 @@ export class ChangelogView {
96
81
  ${item.description ? `<p class="messenger-changelog-description">${this._truncateText(item.description, 100)}</p>` : ''}
97
82
  <div class="messenger-changelog-meta">
98
83
  <span class="messenger-changelog-date">${dateStr}</span>
99
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" class="messenger-changelog-arrow">
100
- <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
101
- </svg>
102
84
  </div>
103
85
  </div>
104
86
  </div>
@@ -159,12 +141,6 @@ export class ChangelogView {
159
141
  }
160
142
 
161
143
  _attachEvents() {
162
- this.element
163
- .querySelector('.sdk-close-btn')
164
- .addEventListener('click', () => {
165
- this.state.setOpen(false);
166
- });
167
-
168
144
  this._attachChangelogEvents();
169
145
  }
170
146
 
@@ -194,4 +170,4 @@ export class ChangelogView {
194
170
  this.element.parentNode.removeChild(this.element);
195
171
  }
196
172
  }
197
- }
173
+ }