@tp3/chat-widget 0.1.3 → 0.1.5

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 +10 -19
  2. package/dist/ChatWidget.mjs +10 -19
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +10 -19
package/dist/ChatWidget.js CHANGED
@@ -189,33 +189,19 @@ function ChatWidget({
189
189
  const chatHeight = 540;
190
190
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
191
191
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
192
- :root {
193
- --chat-primary: #6366F1;
194
- --chat-primary-fg: #fff;
195
- --chat-primary-hover: #4F46E5;
196
- --chat-bot-bubble: #F4F4F5;
197
- --chat-bot-text: #18181B;
198
- --chat-font-heading: "Outfit", sans-serif;
199
- --chat-font-body: "Nunito", sans-serif;
200
- --chat-border: #E4E4E7;
201
- --chat-shadow: 0 8px 24px rgba(0,0,0,.12);
202
- --chat-shadow-lg: 0 12px 48px rgba(0,0,0,.18);
203
- --chat-code-bg: rgba(99,102,241,.12);
204
- --chat-close-btn-bg: rgba(255,255,255,.1);
205
- }
206
192
  @keyframes slide-up { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
207
193
  @keyframes slide-down { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(16px) scale(0.96); } }
208
194
  .chat-window { animation:slide-up .35s cubic-bezier(.16,1,.3,1) forwards; }
209
195
  .chat-window-out { animation:slide-down .25s ease-in forwards; }
210
196
  @keyframes typing-dot { 0%,60% { opacity:.2; transform:translateY(0); } 30% { opacity:1; transform:translateY(-6px); } 100% { opacity:.2; transform:translateY(0); } }
211
197
  .typing-indicator { display:flex; align-items:center; gap:4px; padding:8px 14px; }
212
- .typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--chat-primary); animation:typing-dot 1.4s infinite ease-in-out; }
198
+ .typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--chat-primary, #6366F1); animation:typing-dot 1.4s infinite ease-in-out; }
213
199
  .typing-indicator span:nth-child(2) { animation-delay:.15s; }
214
200
  .typing-indicator span:nth-child(3) { animation-delay:.3s; }
215
- .bot-msg a { color:var(--chat-primary); text-decoration:underline; }
216
- .bot-msg a:hover { color:var(--chat-primary-hover); }
217
- .bot-msg code { background:var(--chat-code-bg); color:var(--chat-primary); padding:1px 5px; border-radius:4px; font-size:.9em; font-family:monospace; }
218
- .bot-msg strong { font-weight:600; color:var(--chat-bot-text); }
201
+ .bot-msg a { color:var(--chat-primary, #6366F1); text-decoration:underline; }
202
+ .bot-msg a:hover { color:var(--chat-primary-hover, #4F46E5); }
203
+ .bot-msg code { background:var(--chat-code-bg, rgba(99,102,241,.12)); color:var(--chat-primary, #6366F1); padding:1px 5px; border-radius:4px; font-size:.9em; font-family:monospace; }
204
+ .bot-msg strong { font-weight:600; color:var(--chat-bot-text, #18181B); }
219
205
  .bot-msg em { font-style:italic; }
220
206
  @media (max-width: 480px) {
221
207
  .chat-window, .chat-window-out {
@@ -248,6 +234,7 @@ function ChatWidget({
248
234
  display: "flex",
249
235
  alignItems: "center",
250
236
  justifyContent: "center",
237
+ flexShrink: 0,
251
238
  boxShadow: "var(--chat-shadow)"
252
239
  },
253
240
  "aria-label": "Abrir chat",
@@ -449,6 +436,10 @@ function ChatWidget({
449
436
  color: "var(--chat-primary-fg)",
450
437
  border: "none",
451
438
  cursor: "pointer",
439
+ display: "flex",
440
+ alignItems: "center",
441
+ justifyContent: "center",
442
+ flexShrink: 0,
452
443
  opacity: loading || !input.trim() ? 0.4 : 1
453
444
  },
454
445
  title: "Enviar",
package/dist/ChatWidget.mjs CHANGED
@@ -165,33 +165,19 @@ function ChatWidget({
165
165
  const chatHeight = 540;
166
166
  return /* @__PURE__ */ jsxs(Fragment, { children: [
167
167
  /* @__PURE__ */ jsx("style", { children: `
168
- :root {
169
- --chat-primary: #6366F1;
170
- --chat-primary-fg: #fff;
171
- --chat-primary-hover: #4F46E5;
172
- --chat-bot-bubble: #F4F4F5;
173
- --chat-bot-text: #18181B;
174
- --chat-font-heading: "Outfit", sans-serif;
175
- --chat-font-body: "Nunito", sans-serif;
176
- --chat-border: #E4E4E7;
177
- --chat-shadow: 0 8px 24px rgba(0,0,0,.12);
178
- --chat-shadow-lg: 0 12px 48px rgba(0,0,0,.18);
179
- --chat-code-bg: rgba(99,102,241,.12);
180
- --chat-close-btn-bg: rgba(255,255,255,.1);
181
- }
182
168
  @keyframes slide-up { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
183
169
  @keyframes slide-down { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(16px) scale(0.96); } }
184
170
  .chat-window { animation:slide-up .35s cubic-bezier(.16,1,.3,1) forwards; }
185
171
  .chat-window-out { animation:slide-down .25s ease-in forwards; }
186
172
  @keyframes typing-dot { 0%,60% { opacity:.2; transform:translateY(0); } 30% { opacity:1; transform:translateY(-6px); } 100% { opacity:.2; transform:translateY(0); } }
187
173
  .typing-indicator { display:flex; align-items:center; gap:4px; padding:8px 14px; }
188
- .typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--chat-primary); animation:typing-dot 1.4s infinite ease-in-out; }
174
+ .typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--chat-primary, #6366F1); animation:typing-dot 1.4s infinite ease-in-out; }
189
175
  .typing-indicator span:nth-child(2) { animation-delay:.15s; }
190
176
  .typing-indicator span:nth-child(3) { animation-delay:.3s; }
191
- .bot-msg a { color:var(--chat-primary); text-decoration:underline; }
192
- .bot-msg a:hover { color:var(--chat-primary-hover); }
193
- .bot-msg code { background:var(--chat-code-bg); color:var(--chat-primary); padding:1px 5px; border-radius:4px; font-size:.9em; font-family:monospace; }
194
- .bot-msg strong { font-weight:600; color:var(--chat-bot-text); }
177
+ .bot-msg a { color:var(--chat-primary, #6366F1); text-decoration:underline; }
178
+ .bot-msg a:hover { color:var(--chat-primary-hover, #4F46E5); }
179
+ .bot-msg code { background:var(--chat-code-bg, rgba(99,102,241,.12)); color:var(--chat-primary, #6366F1); padding:1px 5px; border-radius:4px; font-size:.9em; font-family:monospace; }
180
+ .bot-msg strong { font-weight:600; color:var(--chat-bot-text, #18181B); }
195
181
  .bot-msg em { font-style:italic; }
196
182
  @media (max-width: 480px) {
197
183
  .chat-window, .chat-window-out {
@@ -224,6 +210,7 @@ function ChatWidget({
224
210
  display: "flex",
225
211
  alignItems: "center",
226
212
  justifyContent: "center",
213
+ flexShrink: 0,
227
214
  boxShadow: "var(--chat-shadow)"
228
215
  },
229
216
  "aria-label": "Abrir chat",
@@ -425,6 +412,10 @@ function ChatWidget({
425
412
  color: "var(--chat-primary-fg)",
426
413
  border: "none",
427
414
  cursor: "pointer",
415
+ display: "flex",
416
+ alignItems: "center",
417
+ justifyContent: "center",
418
+ flexShrink: 0,
428
419
  opacity: loading || !input.trim() ? 0.4 : 1
429
420
  },
430
421
  title: "Enviar",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tp3/chat-widget",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "main": "dist/ChatWidget.js",
5
5
  "module": "dist/ChatWidget.mjs",
6
6
  "types": "dist/ChatWidget.d.ts",
package/src/ChatWidget.tsx CHANGED
@@ -209,33 +209,19 @@ export default function ChatWidget({
209
209
  return (
210
210
  <>
211
211
  <style>{`
212
- :root {
213
- --chat-primary: #6366F1;
214
- --chat-primary-fg: #fff;
215
- --chat-primary-hover: #4F46E5;
216
- --chat-bot-bubble: #F4F4F5;
217
- --chat-bot-text: #18181B;
218
- --chat-font-heading: "Outfit", sans-serif;
219
- --chat-font-body: "Nunito", sans-serif;
220
- --chat-border: #E4E4E7;
221
- --chat-shadow: 0 8px 24px rgba(0,0,0,.12);
222
- --chat-shadow-lg: 0 12px 48px rgba(0,0,0,.18);
223
- --chat-code-bg: rgba(99,102,241,.12);
224
- --chat-close-btn-bg: rgba(255,255,255,.1);
225
- }
226
212
  @keyframes slide-up { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
227
213
  @keyframes slide-down { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(16px) scale(0.96); } }
228
214
  .chat-window { animation:slide-up .35s cubic-bezier(.16,1,.3,1) forwards; }
229
215
  .chat-window-out { animation:slide-down .25s ease-in forwards; }
230
216
  @keyframes typing-dot { 0%,60% { opacity:.2; transform:translateY(0); } 30% { opacity:1; transform:translateY(-6px); } 100% { opacity:.2; transform:translateY(0); } }
231
217
  .typing-indicator { display:flex; align-items:center; gap:4px; padding:8px 14px; }
232
- .typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--chat-primary); animation:typing-dot 1.4s infinite ease-in-out; }
218
+ .typing-indicator span { width:7px; height:7px; border-radius:50%; background:var(--chat-primary, #6366F1); animation:typing-dot 1.4s infinite ease-in-out; }
233
219
  .typing-indicator span:nth-child(2) { animation-delay:.15s; }
234
220
  .typing-indicator span:nth-child(3) { animation-delay:.3s; }
235
- .bot-msg a { color:var(--chat-primary); text-decoration:underline; }
236
- .bot-msg a:hover { color:var(--chat-primary-hover); }
237
- .bot-msg code { background:var(--chat-code-bg); color:var(--chat-primary); padding:1px 5px; border-radius:4px; font-size:.9em; font-family:monospace; }
238
- .bot-msg strong { font-weight:600; color:var(--chat-bot-text); }
221
+ .bot-msg a { color:var(--chat-primary, #6366F1); text-decoration:underline; }
222
+ .bot-msg a:hover { color:var(--chat-primary-hover, #4F46E5); }
223
+ .bot-msg code { background:var(--chat-code-bg, rgba(99,102,241,.12)); color:var(--chat-primary, #6366F1); padding:1px 5px; border-radius:4px; font-size:.9em; font-family:monospace; }
224
+ .bot-msg strong { font-weight:600; color:var(--chat-bot-text, #18181B); }
239
225
  .bot-msg em { font-style:italic; }
240
226
  @media (max-width: 480px) {
241
227
  .chat-window, .chat-window-out {
@@ -268,6 +254,7 @@ export default function ChatWidget({
268
254
  display: "flex",
269
255
  alignItems: "center",
270
256
  justifyContent: "center",
257
+ flexShrink: 0,
271
258
  boxShadow: "var(--chat-shadow)",
272
259
  }}
273
260
  aria-label="Abrir chat"
@@ -461,6 +448,10 @@ export default function ChatWidget({
461
448
  color: "var(--chat-primary-fg)",
462
449
  border: "none",
463
450
  cursor: "pointer",
451
+ display: "flex",
452
+ alignItems: "center",
453
+ justifyContent: "center",
454
+ flexShrink: 0,
464
455
  opacity: loading || !input.trim() ? 0.4 : 1,
465
456
  }}
466
457
  title="Enviar"