@askdialog/dialog-react 2.0.1 → 2.1.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.
- package/dist/dialog-react.js +71 -63
- package/dist/dialog-react.umd.cjs +1 -1
- package/package.json +3 -3
package/dist/dialog-react.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { jsxs as d, jsx as t, Fragment as
|
|
2
|
-
import { useRef as L, useState as
|
|
3
|
-
|
|
1
|
+
import { jsxs as d, jsx as t, Fragment as f } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as L, useState as k, useEffect as C, useMemo as m } from "react";
|
|
3
|
+
import { registerDialogInstallation as v, addAuditCapability as w } from "@askdialog/dialog-sdk";
|
|
4
|
+
const S = ({
|
|
4
5
|
title: e = "Your expert",
|
|
5
|
-
description:
|
|
6
|
+
description: i = "A question about this product?"
|
|
6
7
|
}) => /* @__PURE__ */ d("div", { className: "dialog-block-header-container", children: [
|
|
7
8
|
/* @__PURE__ */ t("div", { className: "dialog-block-title", children: e }),
|
|
8
|
-
/* @__PURE__ */ t("div", { className: "dialog-block-description", children:
|
|
9
|
-
] }),
|
|
9
|
+
/* @__PURE__ */ t("div", { className: "dialog-block-description", children: i })
|
|
10
|
+
] }), N = ({ color: e = "#181825" }) => /* @__PURE__ */ d(
|
|
10
11
|
"svg",
|
|
11
12
|
{
|
|
12
13
|
width: "20",
|
|
@@ -40,14 +41,14 @@ const v = ({
|
|
|
40
41
|
/* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_466_934", children: /* @__PURE__ */ t("rect", { width: "20", height: "20", fill: "white" }) }) })
|
|
41
42
|
]
|
|
42
43
|
}
|
|
43
|
-
),
|
|
44
|
+
), P = ({
|
|
44
45
|
client: e,
|
|
45
|
-
questions:
|
|
46
|
+
questions: i,
|
|
46
47
|
productId: l,
|
|
47
48
|
productTitle: s,
|
|
48
49
|
selectedVariantId: a
|
|
49
50
|
}) => {
|
|
50
|
-
const
|
|
51
|
+
const n = (r) => {
|
|
51
52
|
e.sendProductMessage({
|
|
52
53
|
productId: l,
|
|
53
54
|
productTitle: s,
|
|
@@ -56,39 +57,39 @@ const v = ({
|
|
|
56
57
|
fromQuestionSuggestion: !0
|
|
57
58
|
});
|
|
58
59
|
};
|
|
59
|
-
return /* @__PURE__ */ t(
|
|
60
|
+
return /* @__PURE__ */ t(f, { children: i.map((r) => /* @__PURE__ */ d(
|
|
60
61
|
"button",
|
|
61
62
|
{
|
|
62
63
|
className: "dialog-block-suggestions-item",
|
|
63
|
-
onClick: () =>
|
|
64
|
+
onClick: () => n(r.question),
|
|
64
65
|
children: [
|
|
65
|
-
/* @__PURE__ */ t(
|
|
66
|
+
/* @__PURE__ */ t(N, { color: e.theme.primaryColor }),
|
|
66
67
|
/* @__PURE__ */ t("span", { className: "dialog-block-suggestions-item-label", children: r.question })
|
|
67
68
|
]
|
|
68
69
|
},
|
|
69
70
|
r.question
|
|
70
71
|
)) });
|
|
71
|
-
},
|
|
72
|
+
}, x = () => /* @__PURE__ */ d(f, { children: [
|
|
72
73
|
/* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" }),
|
|
73
74
|
/* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" }),
|
|
74
75
|
/* @__PURE__ */ t("div", { className: "dialog-block-suggestions-skeleton-item" })
|
|
75
|
-
] }),
|
|
76
|
+
] }), j = ({
|
|
76
77
|
client: e,
|
|
77
|
-
questions:
|
|
78
|
+
questions: i,
|
|
78
79
|
isLoading: l,
|
|
79
80
|
productId: s,
|
|
80
81
|
productTitle: a,
|
|
81
|
-
selectedVariantId:
|
|
82
|
-
}) => /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-container", children: l || !
|
|
83
|
-
|
|
82
|
+
selectedVariantId: n
|
|
83
|
+
}) => /* @__PURE__ */ t("div", { className: "dialog-block-suggestions-container", children: l || !i ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(
|
|
84
|
+
P,
|
|
84
85
|
{
|
|
85
86
|
client: e,
|
|
86
|
-
questions:
|
|
87
|
+
questions: i,
|
|
87
88
|
productId: s,
|
|
88
89
|
productTitle: a,
|
|
89
|
-
selectedVariantId:
|
|
90
|
+
selectedVariantId: n
|
|
90
91
|
}
|
|
91
|
-
) }),
|
|
92
|
+
) }), B = ({ color: e = "#ffffff" }) => /* @__PURE__ */ t(
|
|
92
93
|
"svg",
|
|
93
94
|
{
|
|
94
95
|
width: "20",
|
|
@@ -107,16 +108,16 @@ const v = ({
|
|
|
107
108
|
}
|
|
108
109
|
)
|
|
109
110
|
}
|
|
110
|
-
),
|
|
111
|
+
), M = ({
|
|
111
112
|
client: e,
|
|
112
|
-
placeholder:
|
|
113
|
+
placeholder: i = "Ask anything...",
|
|
113
114
|
productId: l,
|
|
114
115
|
productTitle: s,
|
|
115
116
|
selectedVariantId: a
|
|
116
117
|
}) => {
|
|
117
|
-
const
|
|
118
|
+
const n = L(null), [r, o] = k(""), u = () => {
|
|
118
119
|
var c;
|
|
119
|
-
(c =
|
|
120
|
+
(c = n.current) == null || c.focus();
|
|
120
121
|
}, g = () => {
|
|
121
122
|
const c = r;
|
|
122
123
|
c.trim() && (e.sendProductMessage({
|
|
@@ -132,11 +133,11 @@ const v = ({
|
|
|
132
133
|
"input",
|
|
133
134
|
{
|
|
134
135
|
id: "dialog-ask-anything-input-ai-input",
|
|
135
|
-
ref:
|
|
136
|
+
ref: n,
|
|
136
137
|
value: r,
|
|
137
138
|
onChange: (c) => o(c.target.value),
|
|
138
139
|
className: "dialog-ask-anything-input-ai-input",
|
|
139
|
-
placeholder:
|
|
140
|
+
placeholder: i,
|
|
140
141
|
onKeyDown: (c) => {
|
|
141
142
|
c.key === "Enter" && g();
|
|
142
143
|
}
|
|
@@ -149,24 +150,24 @@ const v = ({
|
|
|
149
150
|
className: "dialog-input-submit",
|
|
150
151
|
disabled: !r.trim(),
|
|
151
152
|
onClick: g,
|
|
152
|
-
children: /* @__PURE__ */ t(
|
|
153
|
+
children: /* @__PURE__ */ t(B, { color: e.theme.ctaTextColor })
|
|
153
154
|
}
|
|
154
155
|
)
|
|
155
156
|
] });
|
|
156
|
-
},
|
|
157
|
+
}, y = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), A = (e) => {
|
|
157
158
|
if (!e) return;
|
|
158
|
-
const
|
|
159
|
+
const i = document.body;
|
|
159
160
|
Object.keys(e).forEach((l) => {
|
|
160
|
-
const s = l, a =
|
|
161
|
+
const s = l, a = y(l);
|
|
161
162
|
if (e[s] !== void 0) {
|
|
162
163
|
if (typeof e[s] == "object") {
|
|
163
164
|
Object.keys(e[s]).forEach(
|
|
164
|
-
(
|
|
165
|
+
(n) => {
|
|
165
166
|
var o;
|
|
166
|
-
const r =
|
|
167
|
+
const r = n;
|
|
167
168
|
if (r !== void 0) {
|
|
168
|
-
const u =
|
|
169
|
-
|
|
169
|
+
const u = y(n), g = e[s];
|
|
170
|
+
i.style.setProperty(
|
|
170
171
|
`--dialog-theme-${a}-${u}`,
|
|
171
172
|
(o = g[r]) == null ? void 0 : o.toString()
|
|
172
173
|
);
|
|
@@ -176,43 +177,50 @@ const v = ({
|
|
|
176
177
|
return;
|
|
177
178
|
}
|
|
178
179
|
if (s === "ctaBorderType") {
|
|
179
|
-
const
|
|
180
|
-
|
|
180
|
+
const n = e[s] === "rounded" ? "24px" : "0";
|
|
181
|
+
i.style.setProperty(`--dialog-theme-${a}`, n);
|
|
181
182
|
return;
|
|
182
183
|
}
|
|
183
|
-
|
|
184
|
+
i.style.setProperty(
|
|
184
185
|
`--dialog-theme-${a}`,
|
|
185
186
|
e[s].toString()
|
|
186
187
|
);
|
|
187
188
|
}
|
|
188
189
|
});
|
|
189
|
-
},
|
|
190
|
-
e &&
|
|
191
|
-
}, [e]), /* @__PURE__ */ t(
|
|
190
|
+
}, K = ({ theme: e, children: i }) => (C(() => {
|
|
191
|
+
e && A(e);
|
|
192
|
+
}, [e]), /* @__PURE__ */ t(f, { children: i })), E = ({
|
|
192
193
|
client: e,
|
|
193
|
-
productId:
|
|
194
|
+
productId: i,
|
|
194
195
|
productTitle: l,
|
|
195
196
|
selectedVariantId: s,
|
|
196
197
|
enableInput: a = !0
|
|
197
198
|
}) => {
|
|
198
|
-
const [
|
|
199
|
+
const [n, r] = k(!0), [o, u] = k(
|
|
199
200
|
void 0
|
|
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
201
|
);
|
|
210
|
-
|
|
202
|
+
C(() => {
|
|
203
|
+
v({
|
|
204
|
+
method: "react",
|
|
205
|
+
version: "2.1.0"
|
|
206
|
+
}), w("pdp-block");
|
|
207
|
+
}, []);
|
|
208
|
+
const g = m(
|
|
209
|
+
() => n ? "" : o == null ? void 0 : o.assistantName,
|
|
210
|
+
[o, n]
|
|
211
|
+
), b = m(
|
|
212
|
+
() => n ? "" : o == null ? void 0 : o.description,
|
|
213
|
+
[o, n]
|
|
214
|
+
), c = m(
|
|
215
|
+
() => n ? "" : o == null ? void 0 : o.inputPlaceholder,
|
|
216
|
+
[o, n]
|
|
217
|
+
);
|
|
218
|
+
return C(() => {
|
|
211
219
|
let h = !0;
|
|
212
220
|
return (async () => {
|
|
213
221
|
r(!0), u(void 0);
|
|
214
222
|
try {
|
|
215
|
-
const p = await e.getSuggestions(
|
|
223
|
+
const p = await e.getSuggestions(i);
|
|
216
224
|
h && u(p);
|
|
217
225
|
} catch (p) {
|
|
218
226
|
console.error("error", p);
|
|
@@ -222,25 +230,25 @@ const v = ({
|
|
|
222
230
|
})(), () => {
|
|
223
231
|
h = !1;
|
|
224
232
|
};
|
|
225
|
-
}, [e,
|
|
226
|
-
/* @__PURE__ */ t(
|
|
233
|
+
}, [e, i]), /* @__PURE__ */ t(K, { theme: e.theme, children: /* @__PURE__ */ d("div", { id: "dialog-instant", className: "dialog-block-container", children: [
|
|
234
|
+
/* @__PURE__ */ t(S, { title: g, description: b }),
|
|
227
235
|
/* @__PURE__ */ t(
|
|
228
|
-
|
|
236
|
+
j,
|
|
229
237
|
{
|
|
230
238
|
client: e,
|
|
231
239
|
questions: o == null ? void 0 : o.questions,
|
|
232
|
-
isLoading:
|
|
233
|
-
productId:
|
|
240
|
+
isLoading: n,
|
|
241
|
+
productId: i,
|
|
234
242
|
productTitle: l,
|
|
235
243
|
selectedVariantId: s
|
|
236
244
|
}
|
|
237
245
|
),
|
|
238
246
|
a && /* @__PURE__ */ t(
|
|
239
|
-
|
|
247
|
+
M,
|
|
240
248
|
{
|
|
241
249
|
client: e,
|
|
242
250
|
placeholder: c,
|
|
243
|
-
productId:
|
|
251
|
+
productId: i,
|
|
244
252
|
productTitle: l,
|
|
245
253
|
selectedVariantId: s
|
|
246
254
|
}
|
|
@@ -248,6 +256,6 @@ const v = ({
|
|
|
248
256
|
] }) });
|
|
249
257
|
};
|
|
250
258
|
export {
|
|
251
|
-
|
|
252
|
-
|
|
259
|
+
M as DialogInput,
|
|
260
|
+
E as DialogProductBlock
|
|
253
261
|
};
|
|
@@ -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
|
|
1
|
+
(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d["dialog-react"]={},d["react/jsx-runtime"],d.React,d.dialogSdk))})(this,(function(d,e,g,C){"use strict";const L=({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})]}),v=({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"})})})]}),S=({client:o,questions:t,productId:a,productTitle:n,selectedVariantId:l})=>{const i=r=>{o.sendProductMessage({productId:a,productTitle:n,selectedVariantId:l,question:r,fromQuestionSuggestion:!0})};return e.jsx(e.Fragment,{children:t.map(r=>e.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>i(r.question),children:[e.jsx(v,{color:o.theme.primaryColor}),e.jsx("span",{className:"dialog-block-suggestions-item-label",children:r.question})]},r.question))})},w=()=>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"})]}),N=({client:o,questions:t,isLoading:a,productId:n,productTitle:l,selectedVariantId:i})=>e.jsx("div",{className:"dialog-block-suggestions-container",children:a||!t?e.jsx(w,{}):e.jsx(S,{client:o,questions:t,productId:n,productTitle:l,selectedVariantId:i})}),m=({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"})}),b=({client:o,placeholder:t="Ask anything...",productId:a,productTitle:n,selectedVariantId:l})=>{const i=g.useRef(null),[r,s]=g.useState(""),u=()=>{var c;(c=i.current)==null||c.focus()},h=()=>{const c=r;c.trim()&&(o.sendProductMessage({productId:a,productTitle:n,selectedVariantId:l,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:i,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(m,{color:o.theme.ctaTextColor})})]})},y=o=>o.replace(/([A-Z])/g,"-$1").toLowerCase(),P=o=>{if(!o)return;const t=document.body;Object.keys(o).forEach(a=>{const n=a,l=y(a);if(o[n]!==void 0){if(typeof o[n]=="object"){Object.keys(o[n]).forEach(i=>{var s;const r=i;if(r!==void 0){const u=y(i),h=o[n];t.style.setProperty(`--dialog-theme-${l}-${u}`,(s=h[r])==null?void 0:s.toString())}});return}if(n==="ctaBorderType"){const i=o[n]==="rounded"?"24px":"0";t.style.setProperty(`--dialog-theme-${l}`,i);return}t.style.setProperty(`--dialog-theme-${l}`,o[n].toString())}})},M=({theme:o,children:t})=>(g.useEffect(()=>{o&&P(o)},[o]),e.jsx(e.Fragment,{children:t})),j=({client:o,productId:t,productTitle:a,selectedVariantId:n,enableInput:l=!0})=>{const[i,r]=g.useState(!0),[s,u]=g.useState(void 0);g.useEffect(()=>{C.registerDialogInstallation({method:"react",version:"2.1.0"}),C.addAuditCapability("pdp-block")},[]);const h=g.useMemo(()=>i?"":s==null?void 0:s.assistantName,[s,i]),p=g.useMemo(()=>i?"":s==null?void 0:s.description,[s,i]),c=g.useMemo(()=>i?"":s==null?void 0:s.inputPlaceholder,[s,i]);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(M,{theme:o.theme,children:e.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",children:[e.jsx(L,{title:h,description:p}),e.jsx(N,{client:o,questions:s==null?void 0:s.questions,isLoading:i,productId:t,productTitle:a,selectedVariantId:n}),l&&e.jsx(b,{client:o,placeholder:c,productId:t,productTitle:a,selectedVariantId:n})]})})};d.DialogInput=b,d.DialogProductBlock=j,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": "2.0
|
|
3
|
+
"version": "2.1.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": "2.
|
|
22
|
+
"@askdialog/dialog-sdk": "^2.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": "2.
|
|
29
|
+
"@askdialog/dialog-sdk": "2.3.0"
|
|
30
30
|
},
|
|
31
31
|
"author": "Dialog",
|
|
32
32
|
"publishConfig": {
|