@product7/product7-js 0.2.9 → 0.3.0

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@product7/product7-js",
3
- "version": "0.2.9",
3
+ "version": "0.3.0",
4
4
  "description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
5
5
  "main": "dist/product7-js.js",
6
6
  "module": "src/index.js",
@@ -69,21 +69,23 @@ export const messengerComponentsStyles = `
69
69
  }
70
70
 
71
71
  .messenger-message-system-event-name {
72
- font-size: var(--font-size-sm);
72
+ font-size: 0.875rem;
73
73
  font-weight: var(--font-weight-semibold);
74
74
  color: var(--msg-text);
75
75
  line-height: 1.3;
76
76
  }
77
77
 
78
78
  .messenger-message-system-event-action {
79
- font-size: var(--font-size-xs);
80
- color: var(--msg-text-tertiary);
79
+ font-size: 0.875rem;
80
+ font-weight: 500;
81
+ color: var(--msg-text-secondary);
81
82
  margin-top: -2px;
82
83
  }
83
84
 
84
85
  .messenger-message-system-event-time {
85
- font-size: 0.6875rem;
86
- color: var(--msg-text-muted);
86
+ font-size: 0.875rem;
87
+ font-weight: 500;
88
+ color: var(--msg-text-tertiary);
87
89
  }
88
90
 
89
91
  .messenger-message-own {
@@ -136,8 +138,8 @@ export const messengerComponentsStyles = `
136
138
  }
137
139
 
138
140
  .messenger-message-content {
139
- font-size: var(--font-size-base);
140
- font-weight: var(--font-weight-semibold);
141
+ font-size: 0.875rem;
142
+ font-weight: 500;
141
143
  line-height: var(--line-height-relaxed);
142
144
  }
143
145
 
@@ -238,11 +238,15 @@ export class ChatView {
238
238
  content.includes('left the conversation');
239
239
 
240
240
  if (isJoinLeave && message.sender) {
241
- const name = message.sender.name || '';
241
+ const rawName = message.sender.name || '';
242
+ const name = rawName
243
+ .split(' ')
244
+ .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
245
+ .join(' ');
242
246
  const avatarUrl = message.sender.avatarUrl;
243
247
  const initial = name.charAt(0).toUpperCase() || '?';
244
248
  const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
245
- const colorIndex = name.charCodeAt(0) % colors.length;
249
+ const colorIndex = rawName.charCodeAt(0) % colors.length;
246
250
  const avatarHtml = avatarUrl
247
251
  ? `<img src="${this._escapeHtml(avatarUrl)}" alt="${this._escapeHtml(name)}" />`
248
252
  : initial;
@@ -251,8 +255,8 @@ export class ChatView {
251
255
  : `style="background: ${colors[colorIndex]};"`;
252
256
  const timeStr = this._formatMessageTime(message.timestamp);
253
257
 
254
- // Split "Name joined the chat" → name part already in sender, extract action
255
- const action = content.replace(name, '').trim();
258
+ const rawAction = content.replace(rawName, '').trim();
259
+ const action = rawAction.charAt(0).toUpperCase() + rawAction.slice(1);
256
260
 
257
261
  return `
258
262
  <div class="messenger-message-system-event">