@bikdotai/bik-component-library 0.0.838-beta.6 → 0.0.838

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 (81) hide show
  1. package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js +23 -23
  2. package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js.map +1 -1
  3. package/dist/cjs/components/agent-builder/components/AiTextArea.js +1 -1
  4. package/dist/cjs/components/agent-builder/components/AiTextArea.js.map +1 -1
  5. package/dist/cjs/components/agent-builder/components/ToolInstructionsField.js +2 -2
  6. package/dist/cjs/components/agent-builder/components/ToolInstructionsField.js.map +1 -1
  7. package/dist/cjs/components/bik-chatbot/components/ChatWindow.js +20 -20
  8. package/dist/cjs/components/bik-chatbot/components/ChatWindow.js.map +1 -1
  9. package/dist/cjs/components/input/ChipInput.js +1 -1
  10. package/dist/cjs/components/input/ChipInput.js.map +1 -1
  11. package/dist/cjs/components/input/Input-helper.js +1 -1
  12. package/dist/cjs/components/input/Input-helper.js.map +1 -1
  13. package/dist/cjs/components/input/Input.js +1 -1
  14. package/dist/cjs/components/input/Input.js.map +1 -1
  15. package/dist/cjs/components/plans/SubscriptionPlanSelector.js +5 -5
  16. package/dist/cjs/components/plans/SubscriptionPlanSelector.js.map +1 -1
  17. package/dist/cjs/editor/BikEditor.js +1 -1
  18. package/dist/cjs/editor/BikEditor.js.map +1 -1
  19. package/dist/cjs/editor/BikEditor.utils.js +3 -3
  20. package/dist/cjs/editor/BikEditor.utils.js.map +1 -1
  21. package/dist/cjs/editor/extensions/buildExtensions.js +2 -2
  22. package/dist/cjs/editor/extensions/buildExtensions.js.map +1 -1
  23. package/dist/cjs/icons/Informational/General/HourglassFilled.js +2 -0
  24. package/dist/cjs/icons/Informational/General/HourglassFilled.js.map +1 -0
  25. package/dist/cjs/icons/index.js +1 -1
  26. package/dist/cjs/index.js +1 -1
  27. package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js +143 -144
  28. package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js.map +1 -1
  29. package/dist/esm/components/agent-builder/components/AiTextArea.js +23 -24
  30. package/dist/esm/components/agent-builder/components/AiTextArea.js.map +1 -1
  31. package/dist/esm/components/agent-builder/components/ToolInstructionsField.js +30 -31
  32. package/dist/esm/components/agent-builder/components/ToolInstructionsField.js.map +1 -1
  33. package/dist/esm/components/bik-chatbot/components/ChatWindow.js +53 -54
  34. package/dist/esm/components/bik-chatbot/components/ChatWindow.js.map +1 -1
  35. package/dist/esm/components/input/ChipInput.js +40 -41
  36. package/dist/esm/components/input/ChipInput.js.map +1 -1
  37. package/dist/esm/components/input/Input-helper.d.ts +0 -7
  38. package/dist/esm/components/input/Input-helper.js +25 -16
  39. package/dist/esm/components/input/Input-helper.js.map +1 -1
  40. package/dist/esm/components/input/Input.js +58 -60
  41. package/dist/esm/components/input/Input.js.map +1 -1
  42. package/dist/esm/components/input/Input.model.d.ts +0 -1
  43. package/dist/esm/components/plans/SubscriptionPlanSelector.js +40 -42
  44. package/dist/esm/components/plans/SubscriptionPlanSelector.js.map +1 -1
  45. package/dist/esm/editor/BikEditor.js +118 -122
  46. package/dist/esm/editor/BikEditor.js.map +1 -1
  47. package/dist/esm/editor/BikEditor.utils.d.ts +1 -1
  48. package/dist/esm/editor/BikEditor.utils.js +140 -141
  49. package/dist/esm/editor/BikEditor.utils.js.map +1 -1
  50. package/dist/esm/editor/extensions/buildExtensions.js +39 -49
  51. package/dist/esm/editor/extensions/buildExtensions.js.map +1 -1
  52. package/dist/esm/helpers/index.d.ts +0 -1
  53. package/dist/esm/icons/Informational/General/HourglassFilled.d.ts +7 -0
  54. package/dist/esm/icons/Informational/General/HourglassFilled.js +33 -0
  55. package/dist/esm/icons/Informational/General/HourglassFilled.js.map +1 -0
  56. package/dist/esm/icons/Informational/General/index.d.ts +1 -0
  57. package/dist/esm/icons/Media/Visual/index.d.ts +0 -2
  58. package/dist/esm/icons/index.d.ts +25 -25
  59. package/dist/esm/icons/index.js +416 -418
  60. package/dist/esm/icons/index.js.map +1 -1
  61. package/dist/esm/index.js +114 -124
  62. package/dist/esm/index.js.map +1 -1
  63. package/package.json +1 -2
  64. package/dist/cjs/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js +0 -2
  65. package/dist/cjs/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js.map +0 -1
  66. package/dist/cjs/helpers/sanitize.js +0 -2
  67. package/dist/cjs/helpers/sanitize.js.map +0 -1
  68. package/dist/cjs/icons/Media/Visual/FormkitNeutral.js +0 -2
  69. package/dist/cjs/icons/Media/Visual/FormkitNeutral.js.map +0 -1
  70. package/dist/cjs/icons/Media/Visual/FormkitSad.js +0 -2
  71. package/dist/cjs/icons/Media/Visual/FormkitSad.js.map +0 -1
  72. package/dist/esm/editor/extensions/htmlTagStrip/HtmlTagStripExtension.d.ts +0 -13
  73. package/dist/esm/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js +0 -64
  74. package/dist/esm/editor/extensions/htmlTagStrip/HtmlTagStripExtension.js.map +0 -1
  75. package/dist/esm/helpers/sanitize.d.ts +0 -32
  76. package/dist/esm/helpers/sanitize.js +0 -204
  77. package/dist/esm/helpers/sanitize.js.map +0 -1
  78. package/dist/esm/icons/Media/Visual/FormkitNeutral.js +0 -58
  79. package/dist/esm/icons/Media/Visual/FormkitNeutral.js.map +0 -1
  80. package/dist/esm/icons/Media/Visual/FormkitSad.js +0 -61
  81. package/dist/esm/icons/Media/Visual/FormkitSad.js.map +0 -1
package/dist/esm/components/bik-chatbot/components/ChatWindow.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { jsxs as o, jsx as t } from "react/jsx-runtime";
2
2
  import L from "../../../assets/icons/Ai_event_generating.svg.js";
3
- import { stripHtmlTags as V } from "../../../helpers/sanitize.js";
4
- import { useState as f, useRef as S, useEffect as W } from "react";
3
+ import { useState as f, useRef as S, useEffect as V } from "react";
5
4
  import n from "styled-components";
6
- import { BodySecondary as E, BodyCaption as K } from "../../TypographyStyle.js";
7
- import { renderMarkdownLite as R } from "../utils/markdown.js";
8
- import P from "./ThinkingIndicator.js";
9
- const _ = n.div`
5
+ import { BodySecondary as W, BodyCaption as E } from "../../TypographyStyle.js";
6
+ import { renderMarkdownLite as K } from "../utils/markdown.js";
7
+ import R from "./ThinkingIndicator.js";
8
+ const P = n.div`
10
9
  display: flex;
11
10
  flex-direction: column;
12
11
  width: 100%;
@@ -35,7 +34,7 @@ const _ = n.div`
35
34
  `;
36
35
  }
37
36
  }}
38
- `, N = n.div`
37
+ `, _ = n.div`
39
38
  padding: 16px;
40
39
  border-bottom: 1px solid #e5e7eb;
41
40
  display: flex;
@@ -49,13 +48,13 @@ const _ = n.div`
49
48
  font-weight: 500;
50
49
  color: #374151;
51
50
  }
52
- `, q = n.div`
51
+ `, N = n.div`
53
52
  flex: 1;
54
53
  display: flex;
55
54
  flex-direction: column;
56
55
  overflow: hidden;
57
56
  min-height: 0;
58
- `, J = n.div`
57
+ `, q = n.div`
59
58
  flex: 1;
60
59
  overflow-y: auto;
61
60
  padding: 16px;
@@ -84,13 +83,13 @@ const _ = n.div`
84
83
  &::-webkit-scrollbar-thumb:hover {
85
84
  background: #a8a8a8;
86
85
  }
87
- `, O = n.div`
86
+ `, J = n.div`
88
87
  background: white;
89
88
  border-radius: 12px;
90
89
  padding: 16px;
91
90
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
92
91
  border: 1px solid #e5e7eb;
93
- `, Q = n.div`
92
+ `, O = n.div`
94
93
  width: 100%;
95
94
  height: 180px;
96
95
  background: #f3f4f6;
@@ -100,7 +99,7 @@ const _ = n.div`
100
99
  justify-content: center;
101
100
  position: relative;
102
101
  margin-bottom: 12px;
103
- `, U = n.div`
102
+ `, Q = n.div`
104
103
  width: 48px;
105
104
  height: 48px;
106
105
  background: rgba(0, 0, 0, 0.7);
@@ -122,11 +121,11 @@ const _ = n.div`
122
121
  fill: white;
123
122
  margin-left: 2px;
124
123
  }
125
- `, X = n.div`
124
+ `, U = n.div`
126
125
  font-size: 14px;
127
126
  color: #374151;
128
127
  line-height: 1.5;
129
- `, Y = n.div`
128
+ `, X = n.div`
130
129
  padding: 12px 16px;
131
130
  border-radius: 16px;
132
131
  font-size: 14px;
@@ -162,15 +161,15 @@ const _ = n.div`
162
161
  border-bottom-left-radius: 4px;
163
162
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
164
163
  `}
165
- `, Z = n.div`
164
+ `, Y = n.div`
166
165
  padding: 16px;
167
166
  flex-shrink: 0;
168
- `, ee = n.div`
167
+ `, Z = n.div`
169
168
  display: flex;
170
169
  flex-direction: column;
171
170
  gap: 8px;
172
171
  align-items: flex-end;
173
- `, te = n.button`
172
+ `, ee = n.button`
174
173
  border: 1px dotted #febad2;
175
174
  background: linear-gradient(
176
175
  92.69deg,
@@ -199,14 +198,14 @@ const _ = n.div`
199
198
  &:active:not(:disabled) {
200
199
  transform: scale(0.98);
201
200
  }
202
- `, ie = n.div`
201
+ `, te = n.div`
203
202
  padding: 16px;
204
203
  background: white;
205
- `, ne = n.div`
204
+ `, ie = n.div`
206
205
  display: flex;
207
206
  flex-direction: column;
208
207
  gap: 8px;
209
- `, re = n.button`
208
+ `, ne = n.button`
210
209
  background: #fef2f2;
211
210
  color: #dc2626;
212
211
  padding: 12px 16px;
@@ -226,14 +225,14 @@ const _ = n.div`
226
225
  &:active:not(:disabled) {
227
226
  transform: scale(0.98);
228
227
  }
229
- `, oe = n.div`
228
+ `, re = n.div`
230
229
  padding: 16px;
231
230
  flex-shrink: 0;
232
- `, ae = n.div`
231
+ `, oe = n.div`
233
232
  position: relative;
234
233
  display: flex;
235
234
  width: 100%;
236
- `, de = n.textarea`
235
+ `, ae = n.textarea`
237
236
  flex: 1;
238
237
  border: 1px solid ${(e) => e.hasText ? "#3b82f6" : "#d1d5db"};
239
238
  border-radius: 12px;
@@ -260,7 +259,7 @@ const _ = n.div`
260
259
  &::placeholder {
261
260
  color: #9ca3af;
262
261
  }
263
- `, le = n.button`
262
+ `, de = n.button`
264
263
  position: absolute;
265
264
  bottom: 10px;
266
265
  right: 10px;
@@ -292,7 +291,7 @@ const _ = n.div`
292
291
  fill: white;
293
292
  font-weight: bold;
294
293
  }
295
- `, se = n.span`
294
+ `, le = n.span`
296
295
  background: linear-gradient(
297
296
  ${(e) => e.angle || 92.69}deg,
298
297
  ${(e) => e.colors || "#ff166a 0.37%, #fb5f08 100%"}
@@ -301,11 +300,11 @@ const _ = n.div`
301
300
  -webkit-text-fill-color: transparent;
302
301
  background-clip: text;
303
302
  display: inline-block;
304
- `, ke = ({
303
+ `, me = ({
305
304
  messages: e,
306
305
  onSend: p,
307
- header: T = "Create with AI",
308
- placeholder: I = "Discover the right event & launch campaigns for better conversions...",
306
+ header: I = "Create with AI",
307
+ placeholder: T = "Discover the right event & launch campaigns for better conversions...",
309
308
  suggestions: u = [
310
309
  "Top festivals for marketing",
311
310
  "Top events this week?",
@@ -326,51 +325,51 @@ const _ = n.div`
326
325
  r || i.key === "Enter" && !i.shiftKey && (i.preventDefault(), !b && a.trim() && F());
327
326
  }, H = (i) => {
328
327
  if (r) return;
329
- const C = V(i.target.value);
328
+ const C = i.target.value;
330
329
  w(C), j(C.trim().length > 0);
331
330
  const h = y.current;
332
331
  h && (h.style.height = "auto", h.style.height = `${Math.min(h.scrollHeight, 117)}px`);
333
332
  }, x = a.trim().length > 0, G = r || b || !x;
334
- return W(() => {
333
+ return V(() => {
335
334
  v.current?.scrollIntoView({ behavior: "smooth" });
336
- }, [e, c, s]), /* @__PURE__ */ o(_, { chatState: d, style: { height: B || "100%" }, children: [
337
- /* @__PURE__ */ o(N, { children: [
335
+ }, [e, c, s]), /* @__PURE__ */ o(P, { chatState: d, style: { height: B || "100%" }, children: [
336
+ /* @__PURE__ */ o(_, { children: [
338
337
  /* @__PURE__ */ t(L, { height: 24, width: 24 }),
339
- /* @__PURE__ */ t("div", { className: "header-text", children: T })
338
+ /* @__PURE__ */ t("div", { className: "header-text", children: I })
340
339
  ] }),
341
- /* @__PURE__ */ o(q, { children: [
342
- /* @__PURE__ */ o(J, { children: [
343
- d === "conversation-starter" && l && /* @__PURE__ */ o(O, { children: [
344
- /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(U, { onClick: l.onPlay, children: /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M8 5v14l11-7z" }) }) }) }),
345
- /* @__PURE__ */ o(X, { children: [
346
- /* @__PURE__ */ t(E, { style: { fontWeight: 500, marginBottom: "4px" }, children: l.title }),
347
- /* @__PURE__ */ t(K, { children: l.description })
340
+ /* @__PURE__ */ o(N, { children: [
341
+ /* @__PURE__ */ o(q, { children: [
342
+ d === "conversation-starter" && l && /* @__PURE__ */ o(J, { children: [
343
+ /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(Q, { onClick: l.onPlay, children: /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ t("path", { d: "M8 5v14l11-7z" }) }) }) }),
344
+ /* @__PURE__ */ o(U, { children: [
345
+ /* @__PURE__ */ t(W, { style: { fontWeight: 500, marginBottom: "4px" }, children: l.title }),
346
+ /* @__PURE__ */ t(E, { children: l.description })
348
347
  ] })
349
348
  ] }),
350
- e.map((i) => /* @__PURE__ */ t(Y, { role: i.role, children: i.role === "assistant" ? /* @__PURE__ */ t(
349
+ e.map((i) => /* @__PURE__ */ t(X, { role: i.role, children: i.role === "assistant" ? /* @__PURE__ */ t(
351
350
  "div",
352
351
  {
353
352
  dangerouslySetInnerHTML: {
354
- __html: R(i.content)
353
+ __html: K(i.content)
355
354
  }
356
355
  }
357
356
  ) : /* @__PURE__ */ t("div", { style: { whiteSpace: "pre-wrap" }, children: i.content }) }, i.id)),
358
- (c || s) && /* @__PURE__ */ t(P, {}),
357
+ (c || s) && /* @__PURE__ */ t(R, {}),
359
358
  /* @__PURE__ */ t("div", { ref: v })
360
359
  ] }),
361
- g && d === "conversation-starter" && /* @__PURE__ */ t(Z, { children: /* @__PURE__ */ t(ee, { children: g.map((i) => /* @__PURE__ */ t(
362
- te,
360
+ g && d === "conversation-starter" && /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(Z, { children: g.map((i) => /* @__PURE__ */ t(
361
+ ee,
363
362
  {
364
363
  disabled: r,
365
364
  onClick: () => {
366
365
  r || (z?.(i), p(i.text));
367
366
  },
368
- children: /* @__PURE__ */ t(se, { children: i.text })
367
+ children: /* @__PURE__ */ t(le, { children: i.text })
369
368
  },
370
369
  i.id
371
370
  )) }) }),
372
- !g && u.length > 0 && d === "default" && /* @__PURE__ */ t(ie, { children: /* @__PURE__ */ t(ne, { children: u.map((i) => /* @__PURE__ */ t(
373
- re,
371
+ !g && u.length > 0 && d === "default" && /* @__PURE__ */ t(te, { children: /* @__PURE__ */ t(ie, { children: u.map((i) => /* @__PURE__ */ t(
372
+ ne,
374
373
  {
375
374
  disabled: r,
376
375
  onClick: () => !r && p(i),
@@ -378,14 +377,14 @@ const _ = n.div`
378
377
  },
379
378
  i
380
379
  )) }) }),
381
- /* @__PURE__ */ t(oe, { children: /* @__PURE__ */ o(ae, { children: [
380
+ /* @__PURE__ */ t(re, { children: /* @__PURE__ */ o(oe, { children: [
382
381
  /* @__PURE__ */ t(
383
- de,
382
+ ae,
384
383
  {
385
384
  ref: y,
386
385
  value: a,
387
386
  onChange: H,
388
- placeholder: I,
387
+ placeholder: T,
389
388
  onKeyDown: D,
390
389
  disabled: r,
391
390
  hasText: x,
@@ -393,7 +392,7 @@ const _ = n.div`
393
392
  }
394
393
  ),
395
394
  /* @__PURE__ */ t(
396
- le,
395
+ de,
397
396
  {
398
397
  onClick: F,
399
398
  disabled: G,
@@ -423,7 +422,7 @@ const _ = n.div`
423
422
  ] });
424
423
  };
425
424
  export {
426
- se as CustomGradientText,
427
- ke as default
425
+ le as CustomGradientText,
426
+ me as default
428
427
  };
429
428
  //# sourceMappingURL=ChatWindow.js.map
package/dist/esm/components/bik-chatbot/components/ChatWindow.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChatWindow.js","sources":["../../../../../src/components/bik-chatbot/components/ChatWindow.tsx"],"sourcesContent":["import AiIcon from '@src/assets/icons/Ai_event_generating.svg';\nimport { stripHtmlTags } from '@src/helpers/sanitize';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { ChatState, ChatWindowProps } from '../types';\nimport { renderMarkdownLite } from '../utils/markdown';\nimport ThinkingIndicator from './ThinkingIndicator';\n\n// Single-column layout container\nconst ChatContainer = styled.div<{ chatState: ChatState }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\tmax-height: 100%;\n\tbackground: white;\n\tborder-left: 1px solid #e5e7eb;\n\tposition: relative;\n\n\t/* State-based styling */\n\t${(props) => {\n\t\tswitch (props.chatState) {\n\t\t\tcase 'conversation-starter':\n\t\t\t\treturn `\n background: linear-gradient(180deg, #FFF6F9 0%, #FFFFFF 100%);\n `;\n\t\t\tcase 'thinking':\n\t\t\t\treturn `\n background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);\n `;\n\t\t\tdefault:\n\t\t\t\treturn `\n background: white;\n `;\n\t\t}\n\t}}\n`;\n\nconst Header = styled.div`\n\tpadding: 16px;\n\tborder-bottom: 1px solid #e5e7eb;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: white;\n\tflex-shrink: 0;\n\n\t.header-text {\n\t\tfont-size: 14px;\n\t\tfont-weight: 500;\n\t\tcolor: #374151;\n\t}\n`;\n\n// Main content area - single column\nconst MainContent = styled.div`\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tmin-height: 0;\n`;\n\nconst MessagesWrapper = styled.div`\n\tflex: 1;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tbackground: #fafafa;\n\tscroll-behavior: smooth;\n\tmin-height: 0;\n\n\t/* Custom scrollbar */\n\t&::-webkit-scrollbar {\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground: #f1f1f1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #c1c1c1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground: #a8a8a8;\n\t}\n`;\n\nconst VideoCard = styled.div`\n\tbackground: white;\n\tborder-radius: 12px;\n\tpadding: 16px;\n\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\tborder: 1px solid #e5e7eb;\n`;\n\nconst VideoContainer = styled.div`\n\twidth: 100%;\n\theight: 180px;\n\tbackground: #f3f4f6;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\tmargin-bottom: 12px;\n`;\n\nconst PlayButton = styled.div`\n\twidth: 48px;\n\theight: 48px;\n\tbackground: rgba(0, 0, 0, 0.7);\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbackground: rgba(0, 0, 0, 0.8);\n\t\ttransform: scale(1.05);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tmargin-left: 2px;\n\t}\n`;\n\nconst VideoText = styled.div`\n\tfont-size: 14px;\n\tcolor: #374151;\n\tline-height: 1.5;\n`;\n\nconst Bubble = styled.div<{ role: 'user' | 'assistant' | 'system' }>`\n\tpadding: 12px 16px;\n\tborder-radius: 16px;\n\tfont-size: 14px;\n\tmax-width: 80%;\n\twhite-space: pre-line;\n\tword-wrap: break-word;\n\n\t${(props) =>\n\t\tprops.role === 'user'\n\t\t\t? `\n background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);\n margin-left: auto;\n border-bottom-right-radius: 4px;\n \n & > div {\n background: linear-gradient(92.69deg, #FF166A 0.37%, #FB5F08 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: inline-block;\n }\n `\n\t\t\t: props.role === 'system'\n\t\t\t? `\n background: #f3f4f6;\n color: #6b7280;\n font-size: 12px;\n font-style: italic;\n text-align: center;\n margin: 0 auto;\n max-width: 90%;\n `\n\t\t\t: `\n background: white;\n color: #111827;\n border: 1px solid #e5e7eb;\n margin-right: auto;\n border-bottom-left-radius: 4px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n `}\n`;\n\n// Ice breakers section - at the bottom before input\nconst IceBreakersSection = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst IceBreakersGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\talign-items: flex-end;\n`;\n\nconst IceBreakerChip = styled.button<{ disabled?: boolean }>`\n\tborder: 1px dotted #febad2;\n\tbackground: linear-gradient(\n\t\t92.69deg,\n\t\trgba(255, 230, 238, 0.5) 0.37%,\n\t\trgba(255, 240, 231, 0.5) 100%\n\t);\n\tpadding: 8px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\tmax-width: 280px;\n\talign-self: flex-end;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: linear-gradient(\n\t\t\t92.69deg,\n\t\t\trgba(255, 230, 238, 0.7) 0.37%,\n\t\t\trgba(255, 240, 231, 0.7) 100%\n\t\t);\n\t\tborder-color: #f472b6;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\n// Suggestions section - styled like ice breakers but for regular suggestions\nconst SuggestionsSection = styled.div`\n\tpadding: 16px;\n\tbackground: white;\n`;\n\nconst SuggestionsGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nconst SuggestionChip = styled.button<{ disabled?: boolean }>`\n\tbackground: #fef2f2;\n\tcolor: #dc2626;\n\tpadding: 12px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tborder: 1px solid #fecaca;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: #fee2e2;\n\t\tborder-color: #fca5a5;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\nconst InputContainer = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst InputBubble = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nconst TextInput = styled.textarea<{ hasText: boolean; chatState: ChatState }>`\n\tflex: 1;\n\tborder: 1px solid ${(props) => (props.hasText ? '#3b82f6' : '#d1d5db')};\n\tborder-radius: 12px;\n\tpadding: 12px;\n\tpadding-right: 48px;\n\tfont-size: 14px;\n\toutline: none;\n\tcolor: #374151;\n\tbackground: white;\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\ttransition: all 0.2s ease;\n\tresize: none;\n\tmin-height: 44px;\n\tmax-height: 120px;\n\tfont-family: inherit;\n\twidth: 100%;\n\n\t&:focus {\n\t\tborder-color: #3b82f6;\n\t\tbackground: white;\n\t\tbox-shadow: 0px 2px 8px 0px #0000001f, 0 0 0 3px rgba(59, 130, 246, 0.1);\n\t}\n\n\t&::placeholder {\n\t\tcolor: #9ca3af;\n\t}\n`;\n\nconst SendButton = styled.button<{ disabled?: boolean; hasText: boolean }>`\n\tposition: absolute;\n\tbottom: 10px;\n\tright: 10px;\n\twidth: 36px;\n\theight: 36px;\n\tborder-radius: 50%;\n\tbackground: ${(props) =>\n\t\tprops.hasText\n\t\t\t? 'linear-gradient(135deg, #FF166A 0%, #FB5F08 100%)'\n\t\t\t: '#e5e7eb'};\n\tborder: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\tbox-shadow: 0 2px 8px 0px #fa709a1c;\n\tz-index: 2;\n\n\t&:hover:not(:disabled) {\n\t\tbackground: ${(props) =>\n\t\t\tprops.hasText && !props.disabled\n\t\t\t\t? 'linear-gradient(135deg, #F857A6 0%, #FF5858 100%)'\n\t\t\t\t: '#e5e7eb'};\n\t\ttransform: scale(1.05);\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.95);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tfont-weight: bold;\n\t}\n`;\n\n// Customizable gradient text component\nexport const CustomGradientText = styled.span<{\n\tcolors?: string;\n\tangle?: number;\n}>`\n\tbackground: linear-gradient(\n\t\t${(props) => props.angle || 92.69}deg,\n\t\t${(props) => props.colors || '#ff166a 0.37%, #fb5f08 100%'}\n\t);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\tdisplay: inline-block;\n`;\n\n// Export ChatState type for backward compatibility\nexport type { ChatState } from '../types';\n\ninterface ChatWindowWithHeightProps extends ChatWindowProps {\n\tchatWindowHeight?: string | number;\n}\n\nconst ChatWindow: React.FC<ChatWindowWithHeightProps> = ({\n\tmessages,\n\tonSend,\n\theader = 'Create with AI',\n\tplaceholder = 'Discover the right event & launch campaigns for better conversions...',\n\tsuggestions = [\n\t\t'Top festivals for marketing',\n\t\t'Top events this week?',\n\t\t'Top August festivals near you',\n\t],\n\ticeBreakers,\n\tvideoStarter,\n\tdisabled = false,\n\tisThinking = false,\n\tonIceBreakerClick,\n\tchatState,\n\tchatWindowHeight,\n\tinputDisabled = false,\n}) => {\n\tconst [input, setInput] = useState('');\n\tconst [thinking, setThinking] = useState(false);\n\tconst [isTyping, setIsTyping] = useState(false);\n\tconst bottomRef = useRef<HTMLDivElement>(null);\n\tconst textareaRef = useRef<HTMLTextAreaElement>(null);\n\tconst isThinkingState = thinking || isThinking;\n\tconst isInputDisabledState = disabled || inputDisabled;\n\n\t// Determine current chat state\n\tconst getCurrentChatState = (): ChatState => {\n\t\tif (chatState) return chatState; // Explicit state override\n\t\tif (thinking || isThinking) return 'thinking';\n\t\tif (isTyping && input.trim().length > 0) return 'typing';\n\t\tif (messages.length === 0) return 'conversation-starter';\n\t\tif (messages.length > 0) return 'conversation';\n\t\treturn 'default';\n\t};\n\n\tconst currentState = getCurrentChatState();\n\n\t// markdown renderer moved to ../utils/markdown\n\n\tconst handleSend = () => {\n\t\tif (!input.trim() || isInputDisabledState || isThinkingState) return;\n\t\tonSend(input);\n\t\tsetInput('');\n\t\tsetThinking(true);\n\t\tsetTimeout(() => setThinking(false), 1500);\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (isInputDisabledState) return;\n\t\tif (e.key === 'Enter' && !e.shiftKey) {\n\t\t\te.preventDefault();\n\t\t\tif (!isThinkingState && input.trim()) {\n\t\t\t\thandleSend();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\tif (isInputDisabledState) return;\n\t\tconst value = stripHtmlTags(e.target.value);\n\t\tsetInput(value);\n\t\tsetIsTyping(value.trim().length > 0);\n\n\t\t// Auto-resize textarea\n\t\tconst textarea = textareaRef.current;\n\t\tif (textarea) {\n\t\t\ttextarea.style.height = 'auto';\n\t\t\ttextarea.style.height = `${Math.min(textarea.scrollHeight, 117)}px`;\n\t\t}\n\t};\n\n\tconst hasText = input.trim().length > 0;\n\tconst isSendDisabled = isInputDisabledState || isThinkingState || !hasText;\n\n\tuseEffect(() => {\n\t\tbottomRef.current?.scrollIntoView({ behavior: 'smooth' });\n\t}, [messages, thinking, isThinking]);\n\n\t// Use chatWindowHeight if provided, otherwise use 100% if fullHeight is active\n\tconst containerHeight = chatWindowHeight || '100%';\n\n\treturn (\n\t\t<ChatContainer chatState={currentState} style={{ height: containerHeight }}>\n\t\t\t{/* Header */}\n\t\t\t<Header>\n\t\t\t\t<AiIcon height={24} width={24} />\n\t\t\t\t<div className=\"header-text\">{header}</div>\n\t\t\t</Header>\n\n\t\t\t{/* Main Content - Single Column Layout */}\n\t\t\t<MainContent>\n\t\t\t\t{/* Messages Section */}\n\t\t\t\t<MessagesWrapper>\n\t\t\t\t\t{/* Video starter card - only when no messages and videoStarter provided */}\n\t\t\t\t\t{currentState === 'conversation-starter' && videoStarter && (\n\t\t\t\t\t\t<VideoCard>\n\t\t\t\t\t\t\t<VideoContainer>\n\t\t\t\t\t\t\t\t<PlayButton onClick={videoStarter.onPlay}>\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t\t<path d=\"M8 5v14l11-7z\" />\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</PlayButton>\n\t\t\t\t\t\t\t</VideoContainer>\n\t\t\t\t\t\t\t<VideoText>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ fontWeight: 500, marginBottom: '4px' }}>\n\t\t\t\t\t\t\t\t\t{videoStarter.title}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<BodyCaption>{videoStarter.description}</BodyCaption>\n\t\t\t\t\t\t\t</VideoText>\n\t\t\t\t\t\t</VideoCard>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Render messages (assistant supports lite Markdown) */}\n\t\t\t\t\t{messages.map((m) => (\n\t\t\t\t\t\t<Bubble key={m.id} role={m.role}>\n\t\t\t\t\t\t\t{m.role === 'assistant' ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t\t__html: renderMarkdownLite(m.content),\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div style={{ whiteSpace: 'pre-wrap' }}>{m.content}</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Bubble>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{/* Thinking bubble */}\n\t\t\t\t\t{(thinking || isThinking) && <ThinkingIndicator />}\n\n\t\t\t\t\t<div ref={bottomRef} />\n\t\t\t\t</MessagesWrapper>\n\n\t\t\t\t{/* Ice Breakers Section - At bottom when no messages and ice breakers provided */}\n\t\t\t\t{iceBreakers && currentState === 'conversation-starter' && (\n\t\t\t\t\t<IceBreakersSection>\n\t\t\t\t\t\t<IceBreakersGrid>\n\t\t\t\t\t\t\t{iceBreakers.map((iceBreaker) => (\n\t\t\t\t\t\t\t\t<IceBreakerChip\n\t\t\t\t\t\t\t\t\tkey={iceBreaker.id}\n\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (!isInputDisabledState) {\n\t\t\t\t\t\t\t\t\t\t\tonIceBreakerClick?.(iceBreaker);\n\t\t\t\t\t\t\t\t\t\t\tonSend(iceBreaker.text);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CustomGradientText>{iceBreaker.text}</CustomGradientText>\n\t\t\t\t\t\t\t\t</IceBreakerChip>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</IceBreakersGrid>\n\t\t\t\t\t</IceBreakersSection>\n\t\t\t\t)}\n\n\t\t\t\t{/* Regular Suggestions - Show when no ice breakers are provided */}\n\t\t\t\t{!iceBreakers &&\n\t\t\t\t\tsuggestions.length > 0 &&\n\t\t\t\t\tcurrentState === 'default' && (\n\t\t\t\t\t\t<SuggestionsSection>\n\t\t\t\t\t\t\t<SuggestionsGrid>\n\t\t\t\t\t\t\t\t{suggestions.map((s) => (\n\t\t\t\t\t\t\t\t\t<SuggestionChip\n\t\t\t\t\t\t\t\t\t\tkey={s}\n\t\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\t\tonClick={() => !isInputDisabledState && onSend(s)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{s}\n\t\t\t\t\t\t\t\t\t</SuggestionChip>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</SuggestionsGrid>\n\t\t\t\t\t\t</SuggestionsSection>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Input Container - Always at bottom */}\n\t\t\t\t<InputContainer>\n\t\t\t\t\t<InputBubble>\n\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\t\tvalue={input}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\tchatState={currentState}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SendButton\n\t\t\t\t\t\t\tonClick={handleSend}\n\t\t\t\t\t\t\tdisabled={isSendDisabled}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\taria-label=\"Send\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path d=\"M6 12h12\" />\n\t\t\t\t\t\t\t\t<path d=\"M12 6l6 6-6 6\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</SendButton>\n\t\t\t\t\t</InputBubble>\n\t\t\t\t</InputContainer>\n\t\t\t</MainContent>\n\t\t</ChatContainer>\n\t);\n};\n\nexport default ChatWindow;\n"],"names":["ChatContainer","styled","props","Header","MainContent","MessagesWrapper","VideoCard","VideoContainer","PlayButton","VideoText","Bubble","IceBreakersSection","IceBreakersGrid","IceBreakerChip","SuggestionsSection","SuggestionsGrid","SuggestionChip","InputContainer","InputBubble","TextInput","SendButton","CustomGradientText","ChatWindow","messages","onSend","header","placeholder","suggestions","iceBreakers","videoStarter","disabled","isThinking","onIceBreakerClick","chatState","chatWindowHeight","inputDisabled","input","setInput","useState","thinking","setThinking","isTyping","setIsTyping","bottomRef","useRef","textareaRef","isThinkingState","isInputDisabledState","currentState","handleSend","handleKeyDown","e","handleInputChange","value","stripHtmlTags","textarea","hasText","isSendDisabled","useEffect","jsxs","jsx","AiIcon","BodySecondary","BodyCaption","m","renderMarkdownLite","ThinkingIndicator","iceBreaker","s"],"mappings":"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"}
1
+ {"version":3,"file":"ChatWindow.js","sources":["../../../../../src/components/bik-chatbot/components/ChatWindow.tsx"],"sourcesContent":["import AiIcon from '@src/assets/icons/Ai_event_generating.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { ChatState, ChatWindowProps } from '../types';\nimport { renderMarkdownLite } from '../utils/markdown';\nimport ThinkingIndicator from './ThinkingIndicator';\n\n// Single-column layout container\nconst ChatContainer = styled.div<{ chatState: ChatState }>`\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\tmin-width: 0;\n\tmin-height: 0;\n\theight: 100%;\n\tmax-height: 100%;\n\tbackground: white;\n\tborder-left: 1px solid #e5e7eb;\n\tposition: relative;\n\n\t/* State-based styling */\n\t${(props) => {\n\t\tswitch (props.chatState) {\n\t\t\tcase 'conversation-starter':\n\t\t\t\treturn `\n background: linear-gradient(180deg, #FFF6F9 0%, #FFFFFF 100%);\n `;\n\t\t\tcase 'thinking':\n\t\t\t\treturn `\n background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);\n `;\n\t\t\tdefault:\n\t\t\t\treturn `\n background: white;\n `;\n\t\t}\n\t}}\n`;\n\nconst Header = styled.div`\n\tpadding: 16px;\n\tborder-bottom: 1px solid #e5e7eb;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tbackground: white;\n\tflex-shrink: 0;\n\n\t.header-text {\n\t\tfont-size: 14px;\n\t\tfont-weight: 500;\n\t\tcolor: #374151;\n\t}\n`;\n\n// Main content area - single column\nconst MainContent = styled.div`\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tmin-height: 0;\n`;\n\nconst MessagesWrapper = styled.div`\n\tflex: 1;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 16px;\n\tbackground: #fafafa;\n\tscroll-behavior: smooth;\n\tmin-height: 0;\n\n\t/* Custom scrollbar */\n\t&::-webkit-scrollbar {\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-track {\n\t\tbackground: #f1f1f1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #c1c1c1;\n\t\tborder-radius: 3px;\n\t}\n\n\t&::-webkit-scrollbar-thumb:hover {\n\t\tbackground: #a8a8a8;\n\t}\n`;\n\nconst VideoCard = styled.div`\n\tbackground: white;\n\tborder-radius: 12px;\n\tpadding: 16px;\n\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\tborder: 1px solid #e5e7eb;\n`;\n\nconst VideoContainer = styled.div`\n\twidth: 100%;\n\theight: 180px;\n\tbackground: #f3f4f6;\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: relative;\n\tmargin-bottom: 12px;\n`;\n\nconst PlayButton = styled.div`\n\twidth: 48px;\n\theight: 48px;\n\tbackground: rgba(0, 0, 0, 0.7);\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbackground: rgba(0, 0, 0, 0.8);\n\t\ttransform: scale(1.05);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tmargin-left: 2px;\n\t}\n`;\n\nconst VideoText = styled.div`\n\tfont-size: 14px;\n\tcolor: #374151;\n\tline-height: 1.5;\n`;\n\nconst Bubble = styled.div<{ role: 'user' | 'assistant' | 'system' }>`\n\tpadding: 12px 16px;\n\tborder-radius: 16px;\n\tfont-size: 14px;\n\tmax-width: 80%;\n\twhite-space: pre-line;\n\tword-wrap: break-word;\n\n\t${(props) =>\n\t\tprops.role === 'user'\n\t\t\t? `\n background: linear-gradient(92.69deg, rgba(255, 230, 238, 0.5) 0.37%, rgba(255, 240, 231, 0.5) 100%);\n margin-left: auto;\n border-bottom-right-radius: 4px;\n \n & > div {\n background: linear-gradient(92.69deg, #FF166A 0.37%, #FB5F08 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: inline-block;\n }\n `\n\t\t\t: props.role === 'system'\n\t\t\t? `\n background: #f3f4f6;\n color: #6b7280;\n font-size: 12px;\n font-style: italic;\n text-align: center;\n margin: 0 auto;\n max-width: 90%;\n `\n\t\t\t: `\n background: white;\n color: #111827;\n border: 1px solid #e5e7eb;\n margin-right: auto;\n border-bottom-left-radius: 4px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n `}\n`;\n\n// Ice breakers section - at the bottom before input\nconst IceBreakersSection = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst IceBreakersGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\talign-items: flex-end;\n`;\n\nconst IceBreakerChip = styled.button<{ disabled?: boolean }>`\n\tborder: 1px dotted #febad2;\n\tbackground: linear-gradient(\n\t\t92.69deg,\n\t\trgba(255, 230, 238, 0.5) 0.37%,\n\t\trgba(255, 240, 231, 0.5) 100%\n\t);\n\tpadding: 8px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\tmax-width: 280px;\n\talign-self: flex-end;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: linear-gradient(\n\t\t\t92.69deg,\n\t\t\trgba(255, 230, 238, 0.7) 0.37%,\n\t\t\trgba(255, 240, 231, 0.7) 100%\n\t\t);\n\t\tborder-color: #f472b6;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\n// Suggestions section - styled like ice breakers but for regular suggestions\nconst SuggestionsSection = styled.div`\n\tpadding: 16px;\n\tbackground: white;\n`;\n\nconst SuggestionsGrid = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n`;\n\nconst SuggestionChip = styled.button<{ disabled?: boolean }>`\n\tbackground: #fef2f2;\n\tcolor: #dc2626;\n\tpadding: 12px 16px;\n\tborder-radius: 8px;\n\tfont-size: 13px;\n\tborder: 1px solid #fecaca;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\ttext-align: left;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\n\t&:hover:not(:disabled) {\n\t\tbackground: #fee2e2;\n\t\tborder-color: #fca5a5;\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.98);\n\t}\n`;\n\nconst InputContainer = styled.div`\n\tpadding: 16px;\n\tflex-shrink: 0;\n`;\n\nconst InputBubble = styled.div`\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nconst TextInput = styled.textarea<{ hasText: boolean; chatState: ChatState }>`\n\tflex: 1;\n\tborder: 1px solid ${(props) => (props.hasText ? '#3b82f6' : '#d1d5db')};\n\tborder-radius: 12px;\n\tpadding: 12px;\n\tpadding-right: 48px;\n\tfont-size: 14px;\n\toutline: none;\n\tcolor: #374151;\n\tbackground: white;\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\ttransition: all 0.2s ease;\n\tresize: none;\n\tmin-height: 44px;\n\tmax-height: 120px;\n\tfont-family: inherit;\n\twidth: 100%;\n\n\t&:focus {\n\t\tborder-color: #3b82f6;\n\t\tbackground: white;\n\t\tbox-shadow: 0px 2px 8px 0px #0000001f, 0 0 0 3px rgba(59, 130, 246, 0.1);\n\t}\n\n\t&::placeholder {\n\t\tcolor: #9ca3af;\n\t}\n`;\n\nconst SendButton = styled.button<{ disabled?: boolean; hasText: boolean }>`\n\tposition: absolute;\n\tbottom: 10px;\n\tright: 10px;\n\twidth: 36px;\n\theight: 36px;\n\tborder-radius: 50%;\n\tbackground: ${(props) =>\n\t\tprops.hasText\n\t\t\t? 'linear-gradient(135deg, #FF166A 0%, #FB5F08 100%)'\n\t\t\t: '#e5e7eb'};\n\tborder: none;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\ttransition: all 0.2s ease;\n\tbox-shadow: 0 2px 8px 0px #fa709a1c;\n\tz-index: 2;\n\n\t&:hover:not(:disabled) {\n\t\tbackground: ${(props) =>\n\t\t\tprops.hasText && !props.disabled\n\t\t\t\t? 'linear-gradient(135deg, #F857A6 0%, #FF5858 100%)'\n\t\t\t\t: '#e5e7eb'};\n\t\ttransform: scale(1.05);\n\t}\n\n\t&:active:not(:disabled) {\n\t\ttransform: scale(0.95);\n\t}\n\n\tsvg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tfill: white;\n\t\tfont-weight: bold;\n\t}\n`;\n\n// Customizable gradient text component\nexport const CustomGradientText = styled.span<{\n\tcolors?: string;\n\tangle?: number;\n}>`\n\tbackground: linear-gradient(\n\t\t${(props) => props.angle || 92.69}deg,\n\t\t${(props) => props.colors || '#ff166a 0.37%, #fb5f08 100%'}\n\t);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\tdisplay: inline-block;\n`;\n\n// Export ChatState type for backward compatibility\nexport type { ChatState } from '../types';\n\ninterface ChatWindowWithHeightProps extends ChatWindowProps {\n\tchatWindowHeight?: string | number;\n}\n\nconst ChatWindow: React.FC<ChatWindowWithHeightProps> = ({\n\tmessages,\n\tonSend,\n\theader = 'Create with AI',\n\tplaceholder = 'Discover the right event & launch campaigns for better conversions...',\n\tsuggestions = [\n\t\t'Top festivals for marketing',\n\t\t'Top events this week?',\n\t\t'Top August festivals near you',\n\t],\n\ticeBreakers,\n\tvideoStarter,\n\tdisabled = false,\n\tisThinking = false,\n\tonIceBreakerClick,\n\tchatState,\n\tchatWindowHeight,\n\tinputDisabled = false,\n}) => {\n\tconst [input, setInput] = useState('');\n\tconst [thinking, setThinking] = useState(false);\n\tconst [isTyping, setIsTyping] = useState(false);\n\tconst bottomRef = useRef<HTMLDivElement>(null);\n\tconst textareaRef = useRef<HTMLTextAreaElement>(null);\n\tconst isThinkingState = thinking || isThinking;\n\tconst isInputDisabledState = disabled || inputDisabled;\n\n\t// Determine current chat state\n\tconst getCurrentChatState = (): ChatState => {\n\t\tif (chatState) return chatState; // Explicit state override\n\t\tif (thinking || isThinking) return 'thinking';\n\t\tif (isTyping && input.trim().length > 0) return 'typing';\n\t\tif (messages.length === 0) return 'conversation-starter';\n\t\tif (messages.length > 0) return 'conversation';\n\t\treturn 'default';\n\t};\n\n\tconst currentState = getCurrentChatState();\n\n\t// markdown renderer moved to ../utils/markdown\n\n\tconst handleSend = () => {\n\t\tif (!input.trim() || isInputDisabledState || isThinkingState) return;\n\t\tonSend(input);\n\t\tsetInput('');\n\t\tsetThinking(true);\n\t\tsetTimeout(() => setThinking(false), 1500);\n\t};\n\n\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (isInputDisabledState) return;\n\t\tif (e.key === 'Enter' && !e.shiftKey) {\n\t\t\te.preventDefault();\n\t\t\tif (!isThinkingState && input.trim()) {\n\t\t\t\thandleSend();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\tif (isInputDisabledState) return;\n\t\tconst value = e.target.value;\n\t\tsetInput(value);\n\t\tsetIsTyping(value.trim().length > 0);\n\n\t\t// Auto-resize textarea\n\t\tconst textarea = textareaRef.current;\n\t\tif (textarea) {\n\t\t\ttextarea.style.height = 'auto';\n\t\t\ttextarea.style.height = `${Math.min(textarea.scrollHeight, 117)}px`;\n\t\t}\n\t};\n\n\tconst hasText = input.trim().length > 0;\n\tconst isSendDisabled = isInputDisabledState || isThinkingState || !hasText;\n\n\tuseEffect(() => {\n\t\tbottomRef.current?.scrollIntoView({ behavior: 'smooth' });\n\t}, [messages, thinking, isThinking]);\n\n\t// Use chatWindowHeight if provided, otherwise use 100% if fullHeight is active\n\tconst containerHeight = chatWindowHeight || '100%';\n\n\treturn (\n\t\t<ChatContainer chatState={currentState} style={{ height: containerHeight }}>\n\t\t\t{/* Header */}\n\t\t\t<Header>\n\t\t\t\t<AiIcon height={24} width={24} />\n\t\t\t\t<div className=\"header-text\">{header}</div>\n\t\t\t</Header>\n\n\t\t\t{/* Main Content - Single Column Layout */}\n\t\t\t<MainContent>\n\t\t\t\t{/* Messages Section */}\n\t\t\t\t<MessagesWrapper>\n\t\t\t\t\t{/* Video starter card - only when no messages and videoStarter provided */}\n\t\t\t\t\t{currentState === 'conversation-starter' && videoStarter && (\n\t\t\t\t\t\t<VideoCard>\n\t\t\t\t\t\t\t<VideoContainer>\n\t\t\t\t\t\t\t\t<PlayButton onClick={videoStarter.onPlay}>\n\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n\t\t\t\t\t\t\t\t\t\t<path d=\"M8 5v14l11-7z\" />\n\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t</PlayButton>\n\t\t\t\t\t\t\t</VideoContainer>\n\t\t\t\t\t\t\t<VideoText>\n\t\t\t\t\t\t\t\t<BodySecondary style={{ fontWeight: 500, marginBottom: '4px' }}>\n\t\t\t\t\t\t\t\t\t{videoStarter.title}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t<BodyCaption>{videoStarter.description}</BodyCaption>\n\t\t\t\t\t\t\t</VideoText>\n\t\t\t\t\t\t</VideoCard>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Render messages (assistant supports lite Markdown) */}\n\t\t\t\t\t{messages.map((m) => (\n\t\t\t\t\t\t<Bubble key={m.id} role={m.role}>\n\t\t\t\t\t\t\t{m.role === 'assistant' ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t\t__html: renderMarkdownLite(m.content),\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div style={{ whiteSpace: 'pre-wrap' }}>{m.content}</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Bubble>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{/* Thinking bubble */}\n\t\t\t\t\t{(thinking || isThinking) && <ThinkingIndicator />}\n\n\t\t\t\t\t<div ref={bottomRef} />\n\t\t\t\t</MessagesWrapper>\n\n\t\t\t\t{/* Ice Breakers Section - At bottom when no messages and ice breakers provided */}\n\t\t\t\t{iceBreakers && currentState === 'conversation-starter' && (\n\t\t\t\t\t<IceBreakersSection>\n\t\t\t\t\t\t<IceBreakersGrid>\n\t\t\t\t\t\t\t{iceBreakers.map((iceBreaker) => (\n\t\t\t\t\t\t\t\t<IceBreakerChip\n\t\t\t\t\t\t\t\t\tkey={iceBreaker.id}\n\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (!isInputDisabledState) {\n\t\t\t\t\t\t\t\t\t\t\tonIceBreakerClick?.(iceBreaker);\n\t\t\t\t\t\t\t\t\t\t\tonSend(iceBreaker.text);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CustomGradientText>{iceBreaker.text}</CustomGradientText>\n\t\t\t\t\t\t\t\t</IceBreakerChip>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</IceBreakersGrid>\n\t\t\t\t\t</IceBreakersSection>\n\t\t\t\t)}\n\n\t\t\t\t{/* Regular Suggestions - Show when no ice breakers are provided */}\n\t\t\t\t{!iceBreakers &&\n\t\t\t\t\tsuggestions.length > 0 &&\n\t\t\t\t\tcurrentState === 'default' && (\n\t\t\t\t\t\t<SuggestionsSection>\n\t\t\t\t\t\t\t<SuggestionsGrid>\n\t\t\t\t\t\t\t\t{suggestions.map((s) => (\n\t\t\t\t\t\t\t\t\t<SuggestionChip\n\t\t\t\t\t\t\t\t\t\tkey={s}\n\t\t\t\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\t\t\t\tonClick={() => !isInputDisabledState && onSend(s)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{s}\n\t\t\t\t\t\t\t\t\t</SuggestionChip>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</SuggestionsGrid>\n\t\t\t\t\t\t</SuggestionsSection>\n\t\t\t\t\t)}\n\n\t\t\t\t{/* Input Container - Always at bottom */}\n\t\t\t\t<InputContainer>\n\t\t\t\t\t<InputBubble>\n\t\t\t\t\t\t<TextInput\n\t\t\t\t\t\t\tref={textareaRef}\n\t\t\t\t\t\t\tvalue={input}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\tdisabled={isInputDisabledState}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\tchatState={currentState}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SendButton\n\t\t\t\t\t\t\tonClick={handleSend}\n\t\t\t\t\t\t\tdisabled={isSendDisabled}\n\t\t\t\t\t\t\thasText={hasText}\n\t\t\t\t\t\t\taria-label=\"Send\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path d=\"M6 12h12\" />\n\t\t\t\t\t\t\t\t<path d=\"M12 6l6 6-6 6\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</SendButton>\n\t\t\t\t\t</InputBubble>\n\t\t\t\t</InputContainer>\n\t\t\t</MainContent>\n\t\t</ChatContainer>\n\t);\n};\n\nexport default ChatWindow;\n"],"names":["ChatContainer","styled","props","Header","MainContent","MessagesWrapper","VideoCard","VideoContainer","PlayButton","VideoText","Bubble","IceBreakersSection","IceBreakersGrid","IceBreakerChip","SuggestionsSection","SuggestionsGrid","SuggestionChip","InputContainer","InputBubble","TextInput","SendButton","CustomGradientText","ChatWindow","messages","onSend","header","placeholder","suggestions","iceBreakers","videoStarter","disabled","isThinking","onIceBreakerClick","chatState","chatWindowHeight","inputDisabled","input","setInput","useState","thinking","setThinking","isTyping","setIsTyping","bottomRef","useRef","textareaRef","isThinkingState","isInputDisabledState","currentState","handleSend","handleKeyDown","e","handleInputChange","value","textarea","hasText","isSendDisabled","useEffect","jsxs","jsx","AiIcon","BodySecondary","BodyCaption","m","renderMarkdownLite","ThinkingIndicator","iceBreaker","s"],"mappings":"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"}
package/dist/esm/components/input/ChipInput.js CHANGED
@@ -1,14 +1,13 @@
1
- import { jsxs as y, jsx as r } from "react/jsx-runtime";
2
- import { useState as C, useRef as I } from "react";
1
+ import { jsxs as y, jsx as s } from "react/jsx-runtime";
2
+ import { useState as C, useRef as L } from "react";
3
3
  import { COLORS as o } from "../../constants/Theme.js";
4
- import { stripHtmlTags as L } from "../../helpers/sanitize.js";
5
- import { BodySecondary as O, BodyCaption as H } from "../TypographyStyle.js";
6
- import { getContainerStyle as $, getContainerHoverStyle as P, getChipStyle as _, getChipRemoveStyle as q, getInputStyle as z } from "./ChipInput.styled.js";
7
- const X = ({
8
- onChipsChange: c,
9
- placeholder: m,
4
+ import { BodySecondary as O, BodyCaption as T } from "../TypographyStyle.js";
5
+ import { getContainerStyle as $, getContainerHoverStyle as H, getChipStyle as P, getChipRemoveStyle as _, getInputStyle as q } from "./ChipInput.styled.js";
6
+ const U = ({
7
+ onChipsChange: r,
8
+ placeholder: f,
10
9
  chips: n,
11
- label: f,
10
+ label: m,
12
11
  labelColor: h,
13
12
  hintText: p,
14
13
  hintTextColor: k,
@@ -18,63 +17,63 @@ const X = ({
18
17
  chipsContainerCustomStyle: b,
19
18
  nativeID: x
20
19
  }) => {
21
- const [i, u] = C(""), [s, g] = C(!1), S = I(null), d = R || [",", 188, "Enter", 13], B = (e) => {
20
+ const [a, u] = C(""), [c, g] = C(!1), S = L(null), d = R || [",", 188, "Enter", 13], B = (e) => {
22
21
  if (d.includes(e.key) || d.includes(e.keyCode) || d.includes(e.which)) {
23
22
  e.preventDefault();
24
- const t = i.trim();
25
- t && !n.includes(t) && (c([...n, t]), u(""));
26
- } else e.key === "Backspace" && i === "" && n.length > 0 && c(n.slice(0, -1));
23
+ const t = a.trim();
24
+ t && !n.includes(t) && (r([...n, t]), u(""));
25
+ } else e.key === "Backspace" && a === "" && n.length > 0 && r(n.slice(0, -1));
27
26
  }, K = (e) => {
28
- c(n.filter((a, t) => t !== e));
27
+ r(n.filter((i, t) => t !== e));
29
28
  }, D = () => {
30
29
  g(!0);
31
30
  }, M = () => {
32
31
  g(!1);
33
- const e = i.trim();
34
- e && !n.includes(e) && (c([...n, e]), u(""));
35
- }, T = () => {
32
+ const e = a.trim();
33
+ e && !n.includes(e) && (r([...n, e]), u(""));
34
+ }, V = () => {
36
35
  S.current?.focus();
37
- }, V = $(
36
+ }, j = $(
38
37
  !!l,
39
38
  v,
40
39
  b,
41
- s
42
- ), j = s ? {} : P(), w = _(), E = q(), F = z(v);
40
+ c
41
+ ), w = c ? {} : H(), E = P(), F = _(), I = q(v);
43
42
  return /* @__PURE__ */ y(
44
43
  "div",
45
44
  {
46
45
  style: { display: "flex", flexDirection: "column", gap: 8 },
47
46
  id: x,
48
47
  children: [
49
- f && /* @__PURE__ */ r(
48
+ m && /* @__PURE__ */ s(
50
49
  O,
51
50
  {
52
51
  style: {
53
- color: s ? o.content.brand : l ? o.content.negative : h || o.content.primary
52
+ color: c ? o.content.brand : l ? o.content.negative : h || o.content.primary
54
53
  },
55
- children: f
54
+ children: m
56
55
  }
57
56
  ),
58
57
  /* @__PURE__ */ y(
59
58
  "div",
60
59
  {
61
- style: V,
62
- onClick: T,
60
+ style: j,
61
+ onClick: V,
63
62
  onMouseEnter: (e) => {
64
- s || Object.assign(e.currentTarget.style, j);
63
+ c || Object.assign(e.currentTarget.style, w);
65
64
  },
66
65
  onMouseLeave: (e) => {
67
- s || (e.currentTarget.style.border = `1px solid ${l ? o.stroke.negative.vibrant : o.stroke.primary}`);
66
+ c || (e.currentTarget.style.border = `1px solid ${l ? o.stroke.negative.vibrant : o.stroke.primary}`);
68
67
  },
69
68
  children: [
70
- n.map((e, a) => /* @__PURE__ */ y("div", { style: w, children: [
71
- /* @__PURE__ */ r("span", { children: e }),
72
- /* @__PURE__ */ r(
69
+ n.map((e, i) => /* @__PURE__ */ y("div", { style: E, children: [
70
+ /* @__PURE__ */ s("span", { children: e }),
71
+ /* @__PURE__ */ s(
73
72
  "button",
74
73
  {
75
- style: E,
74
+ style: F,
76
75
  onClick: (t) => {
77
- t.stopPropagation(), K(a);
76
+ t.stopPropagation(), K(i);
78
77
  },
79
78
  onMouseEnter: (t) => {
80
79
  t.currentTarget.style.color = o.content.secondary;
@@ -86,26 +85,26 @@ const X = ({
86
85
  children: "×"
87
86
  }
88
87
  )
89
- ] }, a)),
90
- /* @__PURE__ */ r(
88
+ ] }, i)),
89
+ /* @__PURE__ */ s(
91
90
  "input",
92
91
  {
93
92
  ref: S,
94
93
  type: "text",
95
- value: i,
96
- onChange: (e) => u(L(e.target.value)),
94
+ value: a,
95
+ onChange: (e) => u(e.target.value),
97
96
  onKeyDown: B,
98
97
  onFocus: D,
99
98
  onBlur: M,
100
- placeholder: n.length === 0 && m && !s ? m : void 0,
101
- style: F
99
+ placeholder: n.length === 0 && f && !c ? f : void 0,
100
+ style: I
102
101
  }
103
102
  )
104
103
  ]
105
104
  }
106
105
  ),
107
- (!!p || !!l) && /* @__PURE__ */ r(
108
- H,
106
+ (!!p || !!l) && /* @__PURE__ */ s(
107
+ T,
109
108
  {
110
109
  style: {
111
110
  color: l ? o.content.negative : k || o.content.secondary
@@ -118,6 +117,6 @@ const X = ({
118
117
  );
119
118
  };
120
119
  export {
121
- X as default
120
+ U as default
122
121
  };
123
122
  //# sourceMappingURL=ChipInput.js.map
package/dist/esm/components/input/ChipInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { stripHtmlTags } from '../../helpers/sanitize';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string | number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string | number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys || defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) ||\n\t\t\tchipKeys.includes(e.keyCode) ||\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor || COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\n\t\t\t\t\t\t}`;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(stripHtmlTags(e.target.value))}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText || !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor || COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxs","jsx","BodySecondary","COLORS","chip","e","stripHtmlTags","BodyCaption"],"mappings":"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"}
1
+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string | number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string | number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys || defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) ||\n\t\t\tchipKeys.includes(e.keyCode) ||\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor || COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\n\t\t\t\t\t\t}`;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(e.target.value)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText || !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor || COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxs","jsx","BodySecondary","COLORS","chip","e","BodyCaption"],"mappings":"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"}
package/dist/esm/components/input/Input-helper.d.ts CHANGED
@@ -1,12 +1,5 @@
1
1
  import { InputTypeI } from './Input.model';
2
2
  export declare const isFunction: (fn: any) => boolean;
3
- /**
4
- * Strip any HTML markup from a plain-text input value. Backed by DOMPurify
5
- * (parser-based, immune to the malformed-tag bypasses a regex misses); on the
6
- * server DOMPurify is unavailable so a regex tag-strip is used as a fallback.
7
- * Text characters like `<` / `>` in ordinary content are preserved because
8
- * DOMPurify keeps text content and only removes recognised tags.
9
- */
10
3
  export declare const sanitizeUnsafeInput: (input: string) => string;
11
4
  export declare const shouldSanitizeForType: (type: InputTypeI) => boolean;
12
5
  export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {