@askdialog/dialog-react 1.0.0-beta.1 → 1.0.1-beta.0

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 (3) hide show
  1. package/dist/dialog-react.js +91 -85
  2. package/dist/dialog-react.umd.cjs +1 -1
  3. package/package.json +3 -3
package/dist/dialog-react.js CHANGED
@@ -1,12 +1,12 @@
1
- import { jsxs as d, jsx as o, Fragment as m } from "react/jsx-runtime";
2
- import { useRef as L, useState as k, useEffect as b, useMemo as p } from "react";
3
- const y = ({
1
+ import { jsxs as d, jsx as t, Fragment as C } from "react/jsx-runtime";
2
+ import { useRef as L, useState as m, useEffect as y, useMemo as k } from "react";
3
+ const v = ({
4
4
  title: e = "Your expert",
5
5
  description: n = "A question about this product?"
6
6
  }) => /* @__PURE__ */ d("div", { className: "dialog-block-header-container", children: [
7
- /* @__PURE__ */ o("div", { className: "dialog-block-title", children: e }),
8
- /* @__PURE__ */ o("div", { className: "dialog-block-description", children: n })
9
- ] }), v = ({ color: e = "#181825" }) => /* @__PURE__ */ d(
7
+ /* @__PURE__ */ t("div", { className: "dialog-block-title", children: e }),
8
+ /* @__PURE__ */ t("div", { className: "dialog-block-description", children: n })
9
+ ] }), w = ({ color: e = "#181825" }) => /* @__PURE__ */ d(
10
10
  "svg",
11
11
  {
12
12
  width: "20",
@@ -16,7 +16,7 @@ const y = ({
16
16
  xmlns: "http://www.w3.org/2000/svg",
17
17
  children: [
18
18
  /* @__PURE__ */ d("g", { clipPath: "url(#clip0_466_934)", children: [
19
- /* @__PURE__ */ o(
19
+ /* @__PURE__ */ t(
20
20
  "path",
21
21
  {
22
22
  d: "M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",
@@ -26,7 +26,7 @@ const y = ({
26
26
  strokeLinejoin: "round"
27
27
  }
28
28
  ),
29
- /* @__PURE__ */ o(
29
+ /* @__PURE__ */ t(
30
30
  "path",
31
31
  {
32
32
  d: "M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",
@@ -37,58 +37,58 @@ const y = ({
37
37
  }
38
38
  )
39
39
  ] }),
40
- /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ o("rect", { width: "20", height: "20", fill: "white" }) }) })
40
+ /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ t("rect", { width: "20", height: "20", fill: "white" }) }) })
41
41
  ]
42
42
  }
43
- ), w = ({
43
+ ), S = ({
44
44
  client: e,
45
45
  questions: n,
46
46
  productId: l,
47
47
  productTitle: s,
48
48
  selectedVariantId: a
49
49
  }) => {
50
- const r = (i) => {
50
+ const i = (r) => {
51
51
  e.sendProductMessage({
52
52
  productId: l,
53
53
  productTitle: s,
54
54
  selectedVariantId: a,
55
- question: i,
55
+ question: r,
56
56
  fromQuestionSuggestion: !0
57
57
  });
58
58
  };
59
- return /* @__PURE__ */ o(m, { children: n.map((i) => /* @__PURE__ */ d(
59
+ return /* @__PURE__ */ t(C, { children: n.map((r) => /* @__PURE__ */ d(
60
60
  "button",
61
61
  {
62
62
  className: "dialog-block-suggestions-item",
63
- onClick: () => r(i.question),
63
+ onClick: () => i(r.question),
64
64
  children: [
65
- /* @__PURE__ */ o(v, { color: e.theme.primaryColor }),
66
- /* @__PURE__ */ o("span", { className: "dialog-block-suggestions-item-label", children: i.question })
65
+ /* @__PURE__ */ t(w, { color: e.theme.primaryColor }),
66
+ /* @__PURE__ */ t("span", { className: "dialog-block-suggestions-item-label", children: r.question })
67
67
  ]
68
68
  },
69
- i.question
69
+ r.question
70
70
  )) });
71
- }, S = () => /* @__PURE__ */ d(m, { children: [
72
- /* @__PURE__ */ o("div", { className: "dialog-block-suggestions-skeleton-item" }),
73
- /* @__PURE__ */ o("div", { className: "dialog-block-suggestions-skeleton-item" }),
74
- /* @__PURE__ */ o("div", { className: "dialog-block-suggestions-skeleton-item" })
75
- ] }), N = ({
71
+ }, N = () => /* @__PURE__ */ d(C, { children: [
72
+ /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" }),
73
+ /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" }),
74
+ /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" })
75
+ ] }), P = ({
76
76
  client: e,
77
77
  questions: n,
78
78
  isLoading: l,
79
79
  productId: s,
80
80
  productTitle: a,
81
- selectedVariantId: r
82
- }) => /* @__PURE__ */ o("div", { className: "dialog-block-suggestions-container", children: l || !n ? /* @__PURE__ */ o(S, {}) : /* @__PURE__ */ o(
83
- w,
81
+ selectedVariantId: i
82
+ }) => /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-container", children: l || !n ? /* @__PURE__ */ t(N, {}) : /* @__PURE__ */ t(
83
+ S,
84
84
  {
85
85
  client: e,
86
86
  questions: n,
87
87
  productId: s,
88
88
  productTitle: a,
89
- selectedVariantId: r
89
+ selectedVariantId: i
90
90
  }
91
- ) }), P = ({ color: e = "#ffffff" }) => /* @__PURE__ */ o(
91
+ ) }), x = ({ color: e = "#ffffff" }) => /* @__PURE__ */ t(
92
92
  "svg",
93
93
  {
94
94
  width: "20",
@@ -96,7 +96,7 @@ const y = ({
96
96
  viewBox: "0 0 20 20",
97
97
  fill: "none",
98
98
  xmlns: "http://www.w3.org/2000/svg",
99
- children: /* @__PURE__ */ o(
99
+ children: /* @__PURE__ */ t(
100
100
  "path",
101
101
  {
102
102
  d: "M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",
@@ -107,68 +107,68 @@ const y = ({
107
107
  }
108
108
  )
109
109
  }
110
- ), x = ({
110
+ ), j = ({
111
111
  client: e,
112
112
  placeholder: n = "Ask anything...",
113
113
  productId: l,
114
114
  productTitle: s,
115
115
  selectedVariantId: a
116
116
  }) => {
117
- const r = L(null), [i, t] = k(""), g = () => {
117
+ const i = L(null), [r, o] = m(""), u = () => {
118
118
  var c;
119
- (c = r.current) == null || c.focus();
120
- }, u = () => {
121
- const c = i;
119
+ (c = i.current) == null || c.focus();
120
+ }, g = () => {
121
+ const c = r;
122
122
  c.trim() && (e.sendProductMessage({
123
123
  productId: l,
124
124
  productTitle: s,
125
125
  selectedVariantId: a,
126
126
  question: c,
127
127
  fromQuestionSuggestion: !0
128
- }), t(""));
128
+ }), o(""));
129
129
  };
130
- return /* @__PURE__ */ d("div", { className: "dialog-input-wrapper", onClick: g, children: [
131
- /* @__PURE__ */ o(
130
+ return /* @__PURE__ */ d("div", { className: "dialog-input-wrapper", onClick: u, children: [
131
+ /* @__PURE__ */ t(
132
132
  "input",
133
133
  {
134
134
  id: "dialog-ask-anything-input-ai-input",
135
- ref: r,
136
- value: i,
137
- onChange: (c) => t(c.target.value),
135
+ ref: i,
136
+ value: r,
137
+ onChange: (c) => o(c.target.value),
138
138
  className: "dialog-ask-anything-input-ai-input",
139
139
  placeholder: n,
140
140
  onKeyDown: (c) => {
141
- c.key === "Enter" && u();
141
+ c.key === "Enter" && g();
142
142
  }
143
143
  }
144
144
  ),
145
- /* @__PURE__ */ o(
145
+ /* @__PURE__ */ t(
146
146
  "button",
147
147
  {
148
148
  id: "send-message-button-ai-input",
149
149
  className: "dialog-input-submit",
150
- disabled: !i.trim(),
151
- onClick: u,
152
- children: /* @__PURE__ */ o(P, { color: e.theme.ctaTextColor })
150
+ disabled: !r.trim(),
151
+ onClick: g,
152
+ children: /* @__PURE__ */ t(x, { color: e.theme.ctaTextColor })
153
153
  }
154
154
  )
155
155
  ] });
156
- }, f = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), j = (e) => {
156
+ }, b = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), B = (e) => {
157
157
  if (!e) return;
158
158
  const n = document.body;
159
159
  Object.keys(e).forEach((l) => {
160
- const s = l, a = f(l);
160
+ const s = l, a = b(l);
161
161
  if (e[s] !== void 0) {
162
162
  if (typeof e[s] == "object") {
163
163
  Object.keys(e[s]).forEach(
164
- (r) => {
165
- var t;
166
- const i = r;
167
- if (i !== void 0) {
168
- const g = f(r), u = e[s];
164
+ (i) => {
165
+ var o;
166
+ const r = i;
167
+ if (r !== void 0) {
168
+ const u = b(i), g = e[s];
169
169
  n.style.setProperty(
170
- `--dialog-theme-${a}-${g}`,
171
- (t = u[i]) == null ? void 0 : t.toString()
170
+ `--dialog-theme-${a}-${u}`,
171
+ (o = g[r]) == null ? void 0 : o.toString()
172
172
  );
173
173
  }
174
174
  }
@@ -176,8 +176,8 @@ const y = ({
176
176
  return;
177
177
  }
178
178
  if (s === "ctaBorderType") {
179
- const r = e[s] === "rounded" ? "24px" : "0";
180
- n.style.setProperty(`--dialog-theme-${a}`, r);
179
+ const i = e[s] === "rounded" ? "24px" : "0";
180
+ n.style.setProperty(`--dialog-theme-${a}`, i);
181
181
  return;
182
182
  }
183
183
  n.style.setProperty(
@@ -186,51 +186,57 @@ const y = ({
186
186
  );
187
187
  }
188
188
  });
189
- }, B = ({ theme: e, children: n }) => (b(() => {
190
- e && j(e);
191
- }, [e]), /* @__PURE__ */ o(m, { children: n })), F = ({
189
+ }, M = ({ theme: e, children: n }) => (y(() => {
190
+ e && B(e);
191
+ }, [e]), /* @__PURE__ */ t(C, { children: n })), $ = ({
192
192
  client: e,
193
193
  productId: n,
194
194
  productTitle: l,
195
195
  selectedVariantId: s,
196
196
  enableInput: a = !0
197
197
  }) => {
198
- const [r, i] = k(!0), [t, g] = k(
198
+ const [i, r] = m(!0), [o, u] = m(
199
199
  void 0
200
- ), u = p(
201
- () => t == null ? void 0 : t.assistantName,
202
- [t]
203
- ), C = p(
204
- () => t == null ? void 0 : t.description,
205
- [t]
206
- ), c = p(
207
- () => t == null ? void 0 : t.inputPlaceholder,
208
- [t]
200
+ ), g = k(
201
+ () => i ? "" : o == null ? void 0 : o.assistantName,
202
+ [o, i]
203
+ ), f = k(
204
+ () => i ? "" : o == null ? void 0 : o.description,
205
+ [o, i]
206
+ ), c = k(
207
+ () => i ? "" : o == null ? void 0 : o.inputPlaceholder,
208
+ [o, i]
209
209
  );
210
- return b(() => {
211
- (async () => {
210
+ return y(() => {
211
+ let h = !0;
212
+ return (async () => {
213
+ r(!0), u(void 0);
212
214
  try {
213
- const h = await e.getSuggestions(n);
214
- g(h), i(!1);
215
- } catch (h) {
216
- console.error("error", h);
215
+ const p = await e.getSuggestions(n);
216
+ h && u(p);
217
+ } catch (p) {
218
+ console.error("error", p);
219
+ } finally {
220
+ h && r(!1);
217
221
  }
218
- })();
219
- }, [e, n]), /* @__PURE__ */ o(B, { theme: e.theme, children: /* @__PURE__ */ d("div", { id: "dialog-instant", className: "dialog-block-container", children: [
220
- /* @__PURE__ */ o(y, { title: u, description: C }),
221
- /* @__PURE__ */ o(
222
- N,
222
+ })(), () => {
223
+ h = !1;
224
+ };
225
+ }, [e, n]), /* @__PURE__ */ t(M, { theme: e.theme, children: /* @__PURE__ */ d("div", { id: "dialog-instant", className: "dialog-block-container", children: [
226
+ /* @__PURE__ */ t(v, { title: g, description: f }),
227
+ /* @__PURE__ */ t(
228
+ P,
223
229
  {
224
230
  client: e,
225
- questions: t == null ? void 0 : t.questions,
226
- isLoading: r,
231
+ questions: o == null ? void 0 : o.questions,
232
+ isLoading: i,
227
233
  productId: n,
228
234
  productTitle: l,
229
235
  selectedVariantId: s
230
236
  }
231
237
  ),
232
- a && /* @__PURE__ */ o(
233
- x,
238
+ a && /* @__PURE__ */ t(
239
+ j,
234
240
  {
235
241
  client: e,
236
242
  placeholder: c,
@@ -242,6 +248,6 @@ const y = ({
242
248
  ] }) });
243
249
  };
244
250
  export {
245
- x as DialogInput,
246
- F as DialogProductBlock
251
+ j as DialogInput,
252
+ $ as DialogProductBlock
247
253
  };
package/dist/dialog-react.umd.cjs CHANGED
@@ -1 +1 @@
1
- (function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["dialog-react"]={},d["react/jsx-runtime"],d.React))})(this,(function(d,e,g){"use strict";const b=({title:o="Your expert",description:t="A question about this product?"})=>e.jsxs("div",{className:"dialog-block-header-container",children:[e.jsx("div",{className:"dialog-block-title",children:o}),e.jsx("div",{className:"dialog-block-description",children:t})]}),y=({color:o="#181825"})=>e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[e.jsx("path",{d:"M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),e.jsx("defs",{children:e.jsx("clipPath",{id:"clip0_466_934",children:e.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),L=({client:o,questions:t,productId:l,productTitle:n,selectedVariantId:c})=>{const r=i=>{o.sendProductMessage({productId:l,productTitle:n,selectedVariantId:c,question:i,fromQuestionSuggestion:!0})};return e.jsx(e.Fragment,{children:t.map(i=>e.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>r(i.question),children:[e.jsx(y,{color:o.theme.primaryColor}),e.jsx("span",{className:"dialog-block-suggestions-item-label",children:i.question})]},i.question))})},v=()=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),S=({client:o,questions:t,isLoading:l,productId:n,productTitle:c,selectedVariantId:r})=>e.jsx("div",{className:"dialog-block-suggestions-container",children:l||!t?e.jsx(v,{}):e.jsx(L,{client:o,questions:t,productId:n,productTitle:c,selectedVariantId:r})}),w=({color:o="#ffffff"})=>e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),k=({client:o,placeholder:t="Ask anything...",productId:l,productTitle:n,selectedVariantId:c})=>{const r=g.useRef(null),[i,s]=g.useState(""),h=()=>{var a;(a=r.current)==null||a.focus()},u=()=>{const a=i;a.trim()&&(o.sendProductMessage({productId:l,productTitle:n,selectedVariantId:c,question:a,fromQuestionSuggestion:!0}),s(""))},p=a=>{a.key==="Enter"&&u()};return e.jsxs("div",{className:"dialog-input-wrapper",onClick:h,children:[e.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:r,value:i,onChange:a=>s(a.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:t,onKeyDown:p}),e.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!i.trim(),onClick:u,children:e.jsx(w,{color:o.theme.ctaTextColor})})]})},C=o=>o.replace(/([A-Z])/g,"-$1").toLowerCase(),N=o=>{if(!o)return;const t=document.body;Object.keys(o).forEach(l=>{const n=l,c=C(l);if(o[n]!==void 0){if(typeof o[n]=="object"){Object.keys(o[n]).forEach(r=>{var s;const i=r;if(i!==void 0){const h=C(r),u=o[n];t.style.setProperty(`--dialog-theme-${c}-${h}`,(s=u[i])==null?void 0:s.toString())}});return}if(n==="ctaBorderType"){const r=o[n]==="rounded"?"24px":"0";t.style.setProperty(`--dialog-theme-${c}`,r);return}t.style.setProperty(`--dialog-theme-${c}`,o[n].toString())}})},m=({theme:o,children:t})=>(g.useEffect(()=>{o&&N(o)},[o]),e.jsx(e.Fragment,{children:t})),P=({client:o,productId:t,productTitle:l,selectedVariantId:n,enableInput:c=!0})=>{const[r,i]=g.useState(!0),[s,h]=g.useState(void 0),u=g.useMemo(()=>s==null?void 0:s.assistantName,[s]),p=g.useMemo(()=>s==null?void 0:s.description,[s]),a=g.useMemo(()=>s==null?void 0:s.inputPlaceholder,[s]);return g.useEffect(()=>{(async()=>{try{const f=await o.getSuggestions(t);h(f),i(!1)}catch(f){console.error("error",f)}})()},[o,t]),e.jsx(m,{theme:o.theme,children:e.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",children:[e.jsx(b,{title:u,description:p}),e.jsx(S,{client:o,questions:s==null?void 0:s.questions,isLoading:r,productId:t,productTitle:l,selectedVariantId:n}),c&&e.jsx(k,{client:o,placeholder:a,productId:t,productTitle:l,selectedVariantId:n})]})})};d.DialogInput=k,d.DialogProductBlock=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["dialog-react"]={},d["react/jsx-runtime"],d.React))})(this,(function(d,e,g){"use strict";const y=({title:o="Your expert",description:t="A question about this product?"})=>e.jsxs("div",{className:"dialog-block-header-container",children:[e.jsx("div",{className:"dialog-block-title",children:o}),e.jsx("div",{className:"dialog-block-description",children:t})]}),L=({color:o="#181825"})=>e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[e.jsx("path",{d:"M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("path",{d:"M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),e.jsx("defs",{children:e.jsx("clipPath",{id:"clip0_466_934",children:e.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),v=({client:o,questions:t,productId:l,productTitle:i,selectedVariantId:a})=>{const n=r=>{o.sendProductMessage({productId:l,productTitle:i,selectedVariantId:a,question:r,fromQuestionSuggestion:!0})};return e.jsx(e.Fragment,{children:t.map(r=>e.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>n(r.question),children:[e.jsx(L,{color:o.theme.primaryColor}),e.jsx("span",{className:"dialog-block-suggestions-item-label",children:r.question})]},r.question))})},S=()=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),e.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),w=({client:o,questions:t,isLoading:l,productId:i,productTitle:a,selectedVariantId:n})=>e.jsx("div",{className:"dialog-block-suggestions-container",children:l||!t?e.jsx(S,{}):e.jsx(v,{client:o,questions:t,productId:i,productTitle:a,selectedVariantId:n})}),N=({color:o="#ffffff"})=>e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),C=({client:o,placeholder:t="Ask anything...",productId:l,productTitle:i,selectedVariantId:a})=>{const n=g.useRef(null),[r,s]=g.useState(""),u=()=>{var c;(c=n.current)==null||c.focus()},h=()=>{const c=r;c.trim()&&(o.sendProductMessage({productId:l,productTitle:i,selectedVariantId:a,question:c,fromQuestionSuggestion:!0}),s(""))},p=c=>{c.key==="Enter"&&h()};return e.jsxs("div",{className:"dialog-input-wrapper",onClick:u,children:[e.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:n,value:r,onChange:c=>s(c.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:t,onKeyDown:p}),e.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!r.trim(),onClick:h,children:e.jsx(N,{color:o.theme.ctaTextColor})})]})},b=o=>o.replace(/([A-Z])/g,"-$1").toLowerCase(),m=o=>{if(!o)return;const t=document.body;Object.keys(o).forEach(l=>{const i=l,a=b(l);if(o[i]!==void 0){if(typeof o[i]=="object"){Object.keys(o[i]).forEach(n=>{var s;const r=n;if(r!==void 0){const u=b(n),h=o[i];t.style.setProperty(`--dialog-theme-${a}-${u}`,(s=h[r])==null?void 0:s.toString())}});return}if(i==="ctaBorderType"){const n=o[i]==="rounded"?"24px":"0";t.style.setProperty(`--dialog-theme-${a}`,n);return}t.style.setProperty(`--dialog-theme-${a}`,o[i].toString())}})},P=({theme:o,children:t})=>(g.useEffect(()=>{o&&m(o)},[o]),e.jsx(e.Fragment,{children:t})),M=({client:o,productId:t,productTitle:l,selectedVariantId:i,enableInput:a=!0})=>{const[n,r]=g.useState(!0),[s,u]=g.useState(void 0),h=g.useMemo(()=>n?"":s==null?void 0:s.assistantName,[s,n]),p=g.useMemo(()=>n?"":s==null?void 0:s.description,[s,n]),c=g.useMemo(()=>n?"":s==null?void 0:s.inputPlaceholder,[s,n]);return g.useEffect(()=>{let f=!0;return(async()=>{r(!0),u(void 0);try{const k=await o.getSuggestions(t);f&&u(k)}catch(k){console.error("error",k)}finally{f&&r(!1)}})(),()=>{f=!1}},[o,t]),e.jsx(P,{theme:o.theme,children:e.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",children:[e.jsx(y,{title:h,description:p}),e.jsx(w,{client:o,questions:s==null?void 0:s.questions,isLoading:n,productId:t,productTitle:l,selectedVariantId:i}),a&&e.jsx(C,{client:o,placeholder:c,productId:t,productTitle:l,selectedVariantId:i})]})})};d.DialogInput=C,d.DialogProductBlock=M,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@askdialog/dialog-react",
3
- "version": "1.0.0-beta.1",
3
+ "version": "1.0.1-beta.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/dialog-react.umd.js",
@@ -19,14 +19,14 @@
19
19
  "dist"
20
20
  ],
21
21
  "peerDependencies": {
22
- "@askdialog/dialog-sdk": "1.1.0-beta.3",
22
+ "@askdialog/dialog-sdk": "1.1.0",
23
23
  "react": "^19.0.0",
24
24
  "react-dom": "^19.0.0"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@types/react": "^19.2.7",
28
28
  "@types/react-dom": "^19.2.3",
29
- "@askdialog/dialog-sdk": "1.1.0-beta.3"
29
+ "@askdialog/dialog-sdk": "1.1.0"
30
30
  },
31
31
  "author": "Dialog",
32
32
  "publishConfig": {