@tp3/chat-widget 0.1.6 → 0.1.7

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 +19 -19
  2. package/dist/ChatWidget.mjs +19 -19
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +21 -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",
@@ -342,7 +342,7 @@ function ChatWidget({
342
342
  display: "flex",
343
343
  flexDirection: "column",
344
344
  gap: 10,
345
- fontFamily: "var(--chat-font-body)"
345
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
346
346
  },
347
347
  children: [
348
348
  messages.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -356,8 +356,8 @@ function ChatWidget({
356
356
  fontSize: 14,
357
357
  lineHeight: 1.45,
358
358
  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)",
359
+ background: m.role === "user" ? "var(--chat-primary, #6366F1)" : "var(--chat-bot-bubble, #F4F4F5)",
360
+ color: m.role === "user" ? "var(--chat-primary-fg, #fff)" : "var(--chat-bot-text, #18181B)",
361
361
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
362
362
  borderBottomLeftRadius: m.role === "user" ? 16 : 4
363
363
  },
@@ -378,7 +378,7 @@ function ChatWidget({
378
378
  className: "typing-indicator",
379
379
  style: {
380
380
  alignSelf: "flex-start",
381
- background: "var(--chat-bot-bubble)",
381
+ background: "var(--chat-bot-bubble, #F4F4F5)",
382
382
  borderRadius: 16,
383
383
  borderBottomLeftRadius: 4
384
384
  },
@@ -404,7 +404,7 @@ function ChatWidget({
404
404
  display: "flex",
405
405
  gap: 8,
406
406
  padding: "12px 16px 16px",
407
- borderTop: "1px solid var(--chat-border)",
407
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
408
408
  flexShrink: 0
409
409
  },
410
410
  children: [
@@ -419,11 +419,11 @@ function ChatWidget({
419
419
  style: {
420
420
  flex: 1,
421
421
  padding: "10px 14px",
422
- border: "1px solid var(--chat-border)",
422
+ border: "1px solid var(--chat-border, #E4E4E7)",
423
423
  borderRadius: 12,
424
424
  fontSize: 14,
425
425
  outline: "none",
426
- fontFamily: "var(--chat-font-body)"
426
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
427
427
  }
428
428
  }
429
429
  ),
@@ -436,8 +436,8 @@ function ChatWidget({
436
436
  width: 40,
437
437
  height: 40,
438
438
  borderRadius: 12,
439
- background: "var(--chat-primary)",
440
- color: "var(--chat-primary-fg)",
439
+ background: "var(--chat-primary, #6366F1)",
440
+ color: "var(--chat-primary-fg, #fff)",
441
441
  border: "none",
442
442
  cursor: "pointer",
443
443
  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",
@@ -318,7 +318,7 @@ function ChatWidget({
318
318
  display: "flex",
319
319
  flexDirection: "column",
320
320
  gap: 10,
321
- fontFamily: "var(--chat-font-body)"
321
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
322
322
  },
323
323
  children: [
324
324
  messages.map((m, i) => /* @__PURE__ */ jsx(
@@ -332,8 +332,8 @@ function ChatWidget({
332
332
  fontSize: 14,
333
333
  lineHeight: 1.45,
334
334
  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)",
335
+ background: m.role === "user" ? "var(--chat-primary, #6366F1)" : "var(--chat-bot-bubble, #F4F4F5)",
336
+ color: m.role === "user" ? "var(--chat-primary-fg, #fff)" : "var(--chat-bot-text, #18181B)",
337
337
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
338
338
  borderBottomLeftRadius: m.role === "user" ? 16 : 4
339
339
  },
@@ -354,7 +354,7 @@ function ChatWidget({
354
354
  className: "typing-indicator",
355
355
  style: {
356
356
  alignSelf: "flex-start",
357
- background: "var(--chat-bot-bubble)",
357
+ background: "var(--chat-bot-bubble, #F4F4F5)",
358
358
  borderRadius: 16,
359
359
  borderBottomLeftRadius: 4
360
360
  },
@@ -380,7 +380,7 @@ function ChatWidget({
380
380
  display: "flex",
381
381
  gap: 8,
382
382
  padding: "12px 16px 16px",
383
- borderTop: "1px solid var(--chat-border)",
383
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
384
384
  flexShrink: 0
385
385
  },
386
386
  children: [
@@ -395,11 +395,11 @@ function ChatWidget({
395
395
  style: {
396
396
  flex: 1,
397
397
  padding: "10px 14px",
398
- border: "1px solid var(--chat-border)",
398
+ border: "1px solid var(--chat-border, #E4E4E7)",
399
399
  borderRadius: 12,
400
400
  fontSize: 14,
401
401
  outline: "none",
402
- fontFamily: "var(--chat-font-body)"
402
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)"
403
403
  }
404
404
  }
405
405
  ),
@@ -412,8 +412,8 @@ function ChatWidget({
412
412
  width: 40,
413
413
  height: 40,
414
414
  borderRadius: 12,
415
- background: "var(--chat-primary)",
416
- color: "var(--chat-primary-fg)",
415
+ background: "var(--chat-primary, #6366F1)",
416
+ color: "var(--chat-primary-fg, #fff)",
417
417
  border: "none",
418
418
  cursor: "pointer",
419
419
  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.7",
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"
@@ -358,7 +358,7 @@ export default function ChatWidget({
358
358
  display: "flex",
359
359
  flexDirection: "column",
360
360
  gap: 10,
361
- fontFamily: "var(--chat-font-body)",
361
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)",
362
362
  }}
363
363
  >
364
364
  {messages.map((m, i) => (
@@ -374,12 +374,12 @@ export default function ChatWidget({
374
374
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
375
375
  background:
376
376
  m.role === "user"
377
- ? "var(--chat-primary)"
378
- : "var(--chat-bot-bubble)",
377
+ ? "var(--chat-primary, #6366F1)"
378
+ : "var(--chat-bot-bubble, #F4F4F5)",
379
379
  color:
380
380
  m.role === "user"
381
- ? "var(--chat-primary-fg)"
382
- : "var(--chat-bot-text)",
381
+ ? "var(--chat-primary-fg, #fff)"
382
+ : "var(--chat-bot-text, #18181B)",
383
383
  borderBottomRightRadius: m.role === "user" ? 4 : 16,
384
384
  borderBottomLeftRadius: m.role === "user" ? 16 : 4,
385
385
  }}
@@ -400,7 +400,7 @@ export default function ChatWidget({
400
400
  className="typing-indicator"
401
401
  style={{
402
402
  alignSelf: "flex-start",
403
- background: "var(--chat-bot-bubble)",
403
+ background: "var(--chat-bot-bubble, #F4F4F5)",
404
404
  borderRadius: 16,
405
405
  borderBottomLeftRadius: 4,
406
406
  }}
@@ -423,7 +423,7 @@ export default function ChatWidget({
423
423
  display: "flex",
424
424
  gap: 8,
425
425
  padding: "12px 16px 16px",
426
- borderTop: "1px solid var(--chat-border)",
426
+ borderTop: "1px solid var(--chat-border, #E4E4E7)",
427
427
  flexShrink: 0,
428
428
  }}
429
429
  >
@@ -436,11 +436,11 @@ export default function ChatWidget({
436
436
  style={{
437
437
  flex: 1,
438
438
  padding: "10px 14px",
439
- border: "1px solid var(--chat-border)",
439
+ border: "1px solid var(--chat-border, #E4E4E7)",
440
440
  borderRadius: 12,
441
441
  fontSize: 14,
442
442
  outline: "none",
443
- fontFamily: "var(--chat-font-body)",
443
+ fontFamily: "var(--chat-font-body, 'Nunito', sans-serif)",
444
444
  }}
445
445
  />
446
446
  <button
@@ -450,8 +450,8 @@ export default function ChatWidget({
450
450
  width: 40,
451
451
  height: 40,
452
452
  borderRadius: 12,
453
- background: "var(--chat-primary)",
454
- color: "var(--chat-primary-fg)",
453
+ background: "var(--chat-primary, #6366F1)",
454
+ color: "var(--chat-primary-fg, #fff)",
455
455
  border: "none",
456
456
  cursor: "pointer",
457
457
  display: "flex",