@tp3/chat-widget 0.1.4 → 0.1.6

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 +13 -23
  2. package/dist/ChatWidget.mjs +13 -23
  3. package/package.json +1 -1
  4. package/src/ChatWidget.tsx +15 -23
package/dist/ChatWidget.js CHANGED
@@ -67,11 +67,16 @@ function ChatWidget({
67
67
  const typewriterQueue = (0, import_react.useRef)([]);
68
68
  const typewriterTimer = (0, import_react.useRef)(null);
69
69
  (0, import_react.useEffect)(() => {
70
- messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
70
+ if (messages.length > 1) {
71
+ messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
72
+ }
71
73
  }, [messages]);
72
74
  (0, import_react.useEffect)(() => {
73
75
  if (!loading && open) {
74
- inputRef.current?.focus();
76
+ const timer = setTimeout(() => {
77
+ inputRef.current?.focus();
78
+ }, 400);
79
+ return () => clearTimeout(timer);
75
80
  }
76
81
  }, [loading, open]);
77
82
  const TYPEWRITER_MS = 180;
@@ -189,33 +194,19 @@ function ChatWidget({
189
194
  const chatHeight = 540;
190
195
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
191
196
  /* @__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
197
  @keyframes slide-up { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
207
198
  @keyframes slide-down { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(16px) scale(0.96); } }
208
199
  .chat-window { animation:slide-up .35s cubic-bezier(.16,1,.3,1) forwards; }
209
200
  .chat-window-out { animation:slide-down .25s ease-in forwards; }
210
201
  @keyframes typing-dot { 0%,60% { opacity:.2; transform:translateY(0); } 30% { opacity:1; transform:translateY(-6px); } 100% { opacity:.2; transform:translateY(0); } }
211
202
  .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; }
203
+ .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
204
  .typing-indicator span:nth-child(2) { animation-delay:.15s; }
214
205
  .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); }
206
+ .bot-msg a { color:var(--chat-primary, #6366F1); text-decoration:underline; }
207
+ .bot-msg a:hover { color:var(--chat-primary-hover, #4F46E5); }
208
+ .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; }
209
+ .bot-msg strong { font-weight:600; color:var(--chat-bot-text, #18181B); }
219
210
  .bot-msg em { font-style:italic; }
220
211
  @media (max-width: 480px) {
221
212
  .chat-window, .chat-window-out {
@@ -279,12 +270,11 @@ function ChatWidget({
279
270
  width: chatWidth,
280
271
  maxWidth: "calc(100vw - 48px)",
281
272
  height: chatHeight,
282
- maxHeight: "calc(100vh - 48px)",
273
+ maxHeight: "calc(100dvh - 48px)",
283
274
  background: "var(--chat-primary-fg)",
284
275
  display: "flex",
285
276
  flexDirection: "column",
286
277
  borderRadius: 16,
287
- overflow: "hidden",
288
278
  boxShadow: "var(--chat-shadow-lg)"
289
279
  },
290
280
  children: [
package/dist/ChatWidget.mjs CHANGED
@@ -43,11 +43,16 @@ function ChatWidget({
43
43
  const typewriterQueue = useRef([]);
44
44
  const typewriterTimer = useRef(null);
45
45
  useEffect(() => {
46
- messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
46
+ if (messages.length > 1) {
47
+ messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
48
+ }
47
49
  }, [messages]);
48
50
  useEffect(() => {
49
51
  if (!loading && open) {
50
- inputRef.current?.focus();
52
+ const timer = setTimeout(() => {
53
+ inputRef.current?.focus();
54
+ }, 400);
55
+ return () => clearTimeout(timer);
51
56
  }
52
57
  }, [loading, open]);
53
58
  const TYPEWRITER_MS = 180;
@@ -165,33 +170,19 @@ function ChatWidget({
165
170
  const chatHeight = 540;
166
171
  return /* @__PURE__ */ jsxs(Fragment, { children: [
167
172
  /* @__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
173
  @keyframes slide-up { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
183
174
  @keyframes slide-down { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(16px) scale(0.96); } }
184
175
  .chat-window { animation:slide-up .35s cubic-bezier(.16,1,.3,1) forwards; }
185
176
  .chat-window-out { animation:slide-down .25s ease-in forwards; }
186
177
  @keyframes typing-dot { 0%,60% { opacity:.2; transform:translateY(0); } 30% { opacity:1; transform:translateY(-6px); } 100% { opacity:.2; transform:translateY(0); } }
187
178
  .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; }
179
+ .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
180
  .typing-indicator span:nth-child(2) { animation-delay:.15s; }
190
181
  .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); }
182
+ .bot-msg a { color:var(--chat-primary, #6366F1); text-decoration:underline; }
183
+ .bot-msg a:hover { color:var(--chat-primary-hover, #4F46E5); }
184
+ .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; }
185
+ .bot-msg strong { font-weight:600; color:var(--chat-bot-text, #18181B); }
195
186
  .bot-msg em { font-style:italic; }
196
187
  @media (max-width: 480px) {
197
188
  .chat-window, .chat-window-out {
@@ -255,12 +246,11 @@ function ChatWidget({
255
246
  width: chatWidth,
256
247
  maxWidth: "calc(100vw - 48px)",
257
248
  height: chatHeight,
258
- maxHeight: "calc(100vh - 48px)",
249
+ maxHeight: "calc(100dvh - 48px)",
259
250
  background: "var(--chat-primary-fg)",
260
251
  display: "flex",
261
252
  flexDirection: "column",
262
253
  borderRadius: 16,
263
- overflow: "hidden",
264
254
  boxShadow: "var(--chat-shadow-lg)"
265
255
  },
266
256
  children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tp3/chat-widget",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "main": "dist/ChatWidget.js",
5
5
  "module": "dist/ChatWidget.mjs",
6
6
  "types": "dist/ChatWidget.d.ts",
package/src/ChatWidget.tsx CHANGED
@@ -68,12 +68,19 @@ export default function ChatWidget({
68
68
  const typewriterTimer = useRef<ReturnType<typeof setInterval> | null>(null);
69
69
 
70
70
  useEffect(() => {
71
- messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
71
+ // Don't scroll on first render — wait for the open animation
72
+ if (messages.length > 1) {
73
+ messagesEnd.current?.scrollIntoView({ behavior: "smooth" });
74
+ }
72
75
  }, [messages]);
73
76
 
74
77
  useEffect(() => {
75
78
  if (!loading && open) {
76
- inputRef.current?.focus();
79
+ // Delay focus until open animation finishes (350ms)
80
+ const timer = setTimeout(() => {
81
+ inputRef.current?.focus();
82
+ }, 400);
83
+ return () => clearTimeout(timer);
77
84
  }
78
85
  }, [loading, open]);
79
86
 
@@ -209,33 +216,19 @@ export default function ChatWidget({
209
216
  return (
210
217
  <>
211
218
  <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
219
  @keyframes slide-up { from { opacity:0; transform:translateY(16px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
227
220
  @keyframes slide-down { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(16px) scale(0.96); } }
228
221
  .chat-window { animation:slide-up .35s cubic-bezier(.16,1,.3,1) forwards; }
229
222
  .chat-window-out { animation:slide-down .25s ease-in forwards; }
230
223
  @keyframes typing-dot { 0%,60% { opacity:.2; transform:translateY(0); } 30% { opacity:1; transform:translateY(-6px); } 100% { opacity:.2; transform:translateY(0); } }
231
224
  .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; }
225
+ .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
226
  .typing-indicator span:nth-child(2) { animation-delay:.15s; }
234
227
  .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); }
228
+ .bot-msg a { color:var(--chat-primary, #6366F1); text-decoration:underline; }
229
+ .bot-msg a:hover { color:var(--chat-primary-hover, #4F46E5); }
230
+ .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; }
231
+ .bot-msg strong { font-weight:600; color:var(--chat-bot-text, #18181B); }
239
232
  .bot-msg em { font-style:italic; }
240
233
  @media (max-width: 480px) {
241
234
  .chat-window, .chat-window-out {
@@ -298,12 +291,11 @@ export default function ChatWidget({
298
291
  width: chatWidth,
299
292
  maxWidth: "calc(100vw - 48px)",
300
293
  height: chatHeight,
301
- maxHeight: "calc(100vh - 48px)",
294
+ maxHeight: "calc(100dvh - 48px)",
302
295
  background: "var(--chat-primary-fg)",
303
296
  display: "flex",
304
297
  flexDirection: "column",
305
298
  borderRadius: 16,
306
- overflow: "hidden",
307
299
  boxShadow: "var(--chat-shadow-lg)",
308
300
  }}
309
301
  >