@tp3/chat-widget 0.1.6 → 0.1.8

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 (4) hide show
  1. package/dist/ChatWidget.js +20 -19
  2. package/dist/ChatWidget.mjs +20 -19
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +22 -21
package/dist/ChatWidget.js CHANGED
@@ -232,15 +232,15 @@ function ChatWidget({
232
232
  width: 56,
233
233
  height: 56,
234
234
  borderRadius: 16,
235
- background: "var(--chat-primary)",
236
- color: "var(--chat-primary-fg)",
235
+ background: "var(--chat-primary, #6366F1)",
236
+ color: "var(--chat-primary-fg, #fff)",
237
237
  border: "none",
238
238
  cursor: "pointer",
239
239
  display: "flex",
240
240
  alignItems: "center",
241
241
  justifyContent: "center",
242
242
  flexShrink: 0,
243
- boxShadow: "var(--chat-shadow)"
243
+ boxShadow: "var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12))"
244
244
  },
245
245
  "aria-label": "Abrir chat",
246
246
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -271,19 +271,19 @@ function ChatWidget({
271
271
  maxWidth: "calc(100vw - 48px)",
272
272
  height: chatHeight,
273
273
  maxHeight: "calc(100dvh - 48px)",
274
- background: "var(--chat-primary-fg)",
274
+ background: "var(--chat-primary-fg, #fff)",
275
275
  display: "flex",
276
276
  flexDirection: "column",
277
277
  borderRadius: 16,
278
- boxShadow: "var(--chat-shadow-lg)"
278
+ boxShadow: "var(--chat-shadow-lg, 0 12px 48px rgba(0,0,0,.18))"
279
279
  },
280
280
  children: [
281
281
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
282
282
  "div",
283
283
  {
284
284
  style: {
285
- background: "var(--chat-primary)",
286
- color: "var(--chat-primary-fg)",
285
+ background: "var(--chat-primary, #6366F1)",
286
+ color: "var(--chat-primary-fg, #fff)",
287
287
  padding: "14px 20px",
288
288
  display: "flex",
289
289
  alignItems: "center",
@@ -296,7 +296,7 @@ function ChatWidget({
296
296
  "div",
297
297
  {
298
298
  style: {
299
- fontFamily: "var(--chat-font-heading)",
299
+ fontFamily: "var(--chat-font-heading, 'Outfit', sans-serif)",
300
300
  fontWeight: 600,
301
301
  fontSize: 16
302
302
  },
@@ -320,9 +320,9 @@ function ChatWidget({
320
320
  width: 32,
321
321
  height: 32,
322
322
  borderRadius: 12,
323
- background: "var(--chat-close-btn-bg)",
323
+ background: "var(--chat-close-btn-bg, rgba(255,255,255,.1))",
324
324
  border: "none",
325
- color: "var(--chat-primary-fg)",
325
+ color: "var(--chat-primary-fg, #fff)",
326
326
  cursor: "pointer"
327
327
  },
328
328
  "aria-label": "Cerrar chat",
@@ -341,8 +341,9 @@ function ChatWidget({
341
341
  padding: "12px 16px",
342
342
  display: "flex",
343
343
  flexDirection: "column",
344
+ justifyContent: "flex-end",
344
345
  gap: 10,
345
- fontFamily: "var(--chat-font-body)"
346
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
346
347
  },
347
348
  children: [
348
349
  messages.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -356,8 +357,8 @@ function ChatWidget({
356
357
  fontSize: 14,
357
358
  lineHeight: 1.45,
358
359
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
359
- background: m.role === "user" ? "var(--chat-primary)" : "var(--chat-bot-bubble)",
360
- color: m.role === "user" ? "var(--chat-primary-fg)" : "var(--chat-bot-text)",
360
+ background: m.role === "user" ? "var(--chat-primary, #6366F1)" : "var(--chat-bot-bubble, #F4F4F5)",
361
+ color: m.role === "user" ? "var(--chat-primary-fg, #fff)" : "var(--chat-bot-text, #18181B)",
361
362
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
362
363
  borderBottomLeftRadius: m.role === "user" ? 16 : 4
363
364
  },
@@ -378,7 +379,7 @@ function ChatWidget({
378
379
  className: "typing-indicator",
379
380
  style: {
380
381
  alignSelf: "flex-start",
381
- background: "var(--chat-bot-bubble)",
382
+ background: "var(--chat-bot-bubble, #F4F4F5)",
382
383
  borderRadius: 16,
383
384
  borderBottomLeftRadius: 4
384
385
  },
@@ -404,7 +405,7 @@ function ChatWidget({
404
405
  display: "flex",
405
406
  gap: 8,
406
407
  padding: "12px 16px 16px",
407
- borderTop: "1px solid var(--chat-border)",
408
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
408
409
  flexShrink: 0
409
410
  },
410
411
  children: [
@@ -419,11 +420,11 @@ function ChatWidget({
419
420
  style: {
420
421
  flex: 1,
421
422
  padding: "10px 14px",
422
- border: "1px solid var(--chat-border)",
423
+ border: "1px solid var(--chat-border, #E4E4E7)",
423
424
  borderRadius: 12,
424
425
  fontSize: 14,
425
426
  outline: "none",
426
- fontFamily: "var(--chat-font-body)"
427
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
427
428
  }
428
429
  }
429
430
  ),
@@ -436,8 +437,8 @@ function ChatWidget({
436
437
  width: 40,
437
438
  height: 40,
438
439
  borderRadius: 12,
439
- background: "var(--chat-primary)",
440
- color: "var(--chat-primary-fg)",
440
+ background: "var(--chat-primary, #6366F1)",
441
+ color: "var(--chat-primary-fg, #fff)",
441
442
  border: "none",
442
443
  cursor: "pointer",
443
444
  display: "flex",
package/dist/ChatWidget.mjs CHANGED
@@ -208,15 +208,15 @@ function ChatWidget({
208
208
  width: 56,
209
209
  height: 56,
210
210
  borderRadius: 16,
211
- background: "var(--chat-primary)",
212
- color: "var(--chat-primary-fg)",
211
+ background: "var(--chat-primary, #6366F1)",
212
+ color: "var(--chat-primary-fg, #fff)",
213
213
  border: "none",
214
214
  cursor: "pointer",
215
215
  display: "flex",
216
216
  alignItems: "center",
217
217
  justifyContent: "center",
218
218
  flexShrink: 0,
219
- boxShadow: "var(--chat-shadow)"
219
+ boxShadow: "var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12))"
220
220
  },
221
221
  "aria-label": "Abrir chat",
222
222
  children: /* @__PURE__ */ jsx(
@@ -247,19 +247,19 @@ function ChatWidget({
247
247
  maxWidth: "calc(100vw - 48px)",
248
248
  height: chatHeight,
249
249
  maxHeight: "calc(100dvh - 48px)",
250
- background: "var(--chat-primary-fg)",
250
+ background: "var(--chat-primary-fg, #fff)",
251
251
  display: "flex",
252
252
  flexDirection: "column",
253
253
  borderRadius: 16,
254
- boxShadow: "var(--chat-shadow-lg)"
254
+ boxShadow: "var(--chat-shadow-lg, 0 12px 48px rgba(0,0,0,.18))"
255
255
  },
256
256
  children: [
257
257
  /* @__PURE__ */ jsxs(
258
258
  "div",
259
259
  {
260
260
  style: {
261
- background: "var(--chat-primary)",
262
- color: "var(--chat-primary-fg)",
261
+ background: "var(--chat-primary, #6366F1)",
262
+ color: "var(--chat-primary-fg, #fff)",
263
263
  padding: "14px 20px",
264
264
  display: "flex",
265
265
  alignItems: "center",
@@ -272,7 +272,7 @@ function ChatWidget({
272
272
  "div",
273
273
  {
274
274
  style: {
275
- fontFamily: "var(--chat-font-heading)",
275
+ fontFamily: "var(--chat-font-heading, 'Outfit', sans-serif)",
276
276
  fontWeight: 600,
277
277
  fontSize: 16
278
278
  },
@@ -296,9 +296,9 @@ function ChatWidget({
296
296
  width: 32,
297
297
  height: 32,
298
298
  borderRadius: 12,
299
- background: "var(--chat-close-btn-bg)",
299
+ background: "var(--chat-close-btn-bg, rgba(255,255,255,.1))",
300
300
  border: "none",
301
- color: "var(--chat-primary-fg)",
301
+ color: "var(--chat-primary-fg, #fff)",
302
302
  cursor: "pointer"
303
303
  },
304
304
  "aria-label": "Cerrar chat",
@@ -317,8 +317,9 @@ function ChatWidget({
317
317
  padding: "12px 16px",
318
318
  display: "flex",
319
319
  flexDirection: "column",
320
+ justifyContent: "flex-end",
320
321
  gap: 10,
321
- fontFamily: "var(--chat-font-body)"
322
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
322
323
  },
323
324
  children: [
324
325
  messages.map((m, i) => /* @__PURE__ */ jsx(
@@ -332,8 +333,8 @@ function ChatWidget({
332
333
  fontSize: 14,
333
334
  lineHeight: 1.45,
334
335
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
335
- background: m.role === "user" ? "var(--chat-primary)" : "var(--chat-bot-bubble)",
336
- color: m.role === "user" ? "var(--chat-primary-fg)" : "var(--chat-bot-text)",
336
+ background: m.role === "user" ? "var(--chat-primary, #6366F1)" : "var(--chat-bot-bubble, #F4F4F5)",
337
+ color: m.role === "user" ? "var(--chat-primary-fg, #fff)" : "var(--chat-bot-text, #18181B)",
337
338
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
338
339
  borderBottomLeftRadius: m.role === "user" ? 16 : 4
339
340
  },
@@ -354,7 +355,7 @@ function ChatWidget({
354
355
  className: "typing-indicator",
355
356
  style: {
356
357
  alignSelf: "flex-start",
357
- background: "var(--chat-bot-bubble)",
358
+ background: "var(--chat-bot-bubble, #F4F4F5)",
358
359
  borderRadius: 16,
359
360
  borderBottomLeftRadius: 4
360
361
  },
@@ -380,7 +381,7 @@ function ChatWidget({
380
381
  display: "flex",
381
382
  gap: 8,
382
383
  padding: "12px 16px 16px",
383
- borderTop: "1px solid var(--chat-border)",
384
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
384
385
  flexShrink: 0
385
386
  },
386
387
  children: [
@@ -395,11 +396,11 @@ function ChatWidget({
395
396
  style: {
396
397
  flex: 1,
397
398
  padding: "10px 14px",
398
- border: "1px solid var(--chat-border)",
399
+ border: "1px solid var(--chat-border, #E4E4E7)",
399
400
  borderRadius: 12,
400
401
  fontSize: 14,
401
402
  outline: "none",
402
- fontFamily: "var(--chat-font-body)"
403
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
403
404
  }
404
405
  }
405
406
  ),
@@ -412,8 +413,8 @@ function ChatWidget({
412
413
  width: 40,
413
414
  height: 40,
414
415
  borderRadius: 12,
415
- background: "var(--chat-primary)",
416
- color: "var(--chat-primary-fg)",
416
+ background: "var(--chat-primary, #6366F1)",
417
+ color: "var(--chat-primary-fg, #fff)",
417
418
  border: "none",
418
419
  cursor: "pointer",
419
420
  display: "flex",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tp3/chat-widget",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "main": "dist/ChatWidget.js",
5
5
  "module": "dist/ChatWidget.mjs",
6
6
  "types": "dist/ChatWidget.d.ts",
package/src/ChatWidget.tsx CHANGED
@@ -254,15 +254,15 @@ export default function ChatWidget({
254
254
  width: 56,
255
255
  height: 56,
256
256
  borderRadius: 16,
257
- background: "var(--chat-primary)",
258
- color: "var(--chat-primary-fg)",
257
+ background: "var(--chat-primary, #6366F1)",
258
+ color: "var(--chat-primary-fg, #fff)",
259
259
  border: "none",
260
260
  cursor: "pointer",
261
261
  display: "flex",
262
262
  alignItems: "center",
263
263
  justifyContent: "center",
264
264
  flexShrink: 0,
265
- boxShadow: "var(--chat-shadow)",
265
+ boxShadow: "var(--chat-shadow, 0 8px 24px rgba(0,0,0,.12))",
266
266
  }}
267
267
  aria-label="Abrir chat"
268
268
  >
@@ -292,18 +292,18 @@ export default function ChatWidget({
292
292
  maxWidth: "calc(100vw - 48px)",
293
293
  height: chatHeight,
294
294
  maxHeight: "calc(100dvh - 48px)",
295
- background: "var(--chat-primary-fg)",
295
+ background: "var(--chat-primary-fg, #fff)",
296
296
  display: "flex",
297
297
  flexDirection: "column",
298
298
  borderRadius: 16,
299
- boxShadow: "var(--chat-shadow-lg)",
299
+ boxShadow: "var(--chat-shadow-lg, 0 12px 48px rgba(0,0,0,.18))",
300
300
  }}
301
301
  >
302
302
  {/* Header */}
303
303
  <div
304
304
  style={{
305
- background: "var(--chat-primary)",
306
- color: "var(--chat-primary-fg)",
305
+ background: "var(--chat-primary, #6366F1)",
306
+ color: "var(--chat-primary-fg, #fff)",
307
307
  padding: "14px 20px",
308
308
  display: "flex",
309
309
  alignItems: "center",
@@ -314,7 +314,7 @@ export default function ChatWidget({
314
314
  <div>
315
315
  <div
316
316
  style={{
317
- fontFamily: "var(--chat-font-heading)",
317
+ fontFamily: "var(--chat-font-heading, 'Outfit', sans-serif)",
318
318
  fontWeight: 600,
319
319
  fontSize: 16,
320
320
  }}
@@ -338,9 +338,9 @@ export default function ChatWidget({
338
338
  width: 32,
339
339
  height: 32,
340
340
  borderRadius: 12,
341
- background: "var(--chat-close-btn-bg)",
341
+ background: "var(--chat-close-btn-bg, rgba(255,255,255,.1))",
342
342
  border: "none",
343
- color: "var(--chat-primary-fg)",
343
+ color: "var(--chat-primary-fg, #fff)",
344
344
  cursor: "pointer",
345
345
  }}
346
346
  aria-label="Cerrar chat"
@@ -357,8 +357,9 @@ export default function ChatWidget({
357
357
  padding: "12px 16px",
358
358
  display: "flex",
359
359
  flexDirection: "column",
360
+ justifyContent: "flex-end",
360
361
  gap: 10,
361
- fontFamily: "var(--chat-font-body)",
362
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)",
362
363
  }}
363
364
  >
364
365
  {messages.map((m, i) => (
@@ -374,12 +375,12 @@ export default function ChatWidget({
374
375
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
375
376
  background:
376
377
  m.role === "user"
377
- ? "var(--chat-primary)"
378
- : "var(--chat-bot-bubble)",
378
+ ? "var(--chat-primary, #6366F1)"
379
+ : "var(--chat-bot-bubble, #F4F4F5)",
379
380
  color:
380
381
  m.role === "user"
381
- ? "var(--chat-primary-fg)"
382
- : "var(--chat-bot-text)",
382
+ ? "var(--chat-primary-fg, #fff)"
383
+ : "var(--chat-bot-text, #18181B)",
383
384
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
384
385
  borderBottomLeftRadius: m.role === "user" ? 16 : 4,
385
386
  }}
@@ -400,7 +401,7 @@ export default function ChatWidget({
400
401
  className="typing-indicator"
401
402
  style={{
402
403
  alignSelf: "flex-start",
403
- background: "var(--chat-bot-bubble)",
404
+ background: "var(--chat-bot-bubble, #F4F4F5)",
404
405
  borderRadius: 16,
405
406
  borderBottomLeftRadius: 4,
406
407
  }}
@@ -423,7 +424,7 @@ export default function ChatWidget({
423
424
  display: "flex",
424
425
  gap: 8,
425
426
  padding: "12px 16px 16px",
426
- borderTop: "1px solid var(--chat-border)",
427
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
427
428
  flexShrink: 0,
428
429
  }}
429
430
  >
@@ -436,11 +437,11 @@ export default function ChatWidget({
436
437
  style={{
437
438
  flex: 1,
438
439
  padding: "10px 14px",
439
- border: "1px solid var(--chat-border)",
440
+ border: "1px solid var(--chat-border, #E4E4E7)",
440
441
  borderRadius: 12,
441
442
  fontSize: 14,
442
443
  outline: "none",
443
- fontFamily: "var(--chat-font-body)",
444
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)",
444
445
  }}
445
446
  />
446
447
  <button
@@ -450,8 +451,8 @@ export default function ChatWidget({
450
451
  width: 40,
451
452
  height: 40,
452
453
  borderRadius: 12,
453
- background: "var(--chat-primary)",
454
- color: "var(--chat-primary-fg)",
454
+ background: "var(--chat-primary, #6366F1)",
455
+ color: "var(--chat-primary-fg, #fff)",
455
456
  border: "none",
456
457
  cursor: "pointer",
457
458
  display: "flex",