@askdialog/dialog-vue 3.0.2 → 3.2.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-vue.css +1 -1
- package/dist/dialog-vue.js +169 -123
- package/dist/dialog-vue.umd.cjs +3 -3
- package/package.json +3 -3
package/dist/dialog-vue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.dialog-block-header-container[data-v-28e6dda7]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title[data-v-28e6dda7]{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description[data-v-28e6dda7]{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item[data-v-
|
|
1
|
+
.dialog-block-header-container[data-v-28e6dda7]{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title[data-v-28e6dda7]{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description[data-v-28e6dda7]{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item[data-v-db34d4b4]{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item[data-v-db34d4b4]:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label[data-v-db34d4b4]{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:start;flex:1}.dialog-block-suggestions-item-icon path[data-v-db34d4b4]{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item[data-v-26a64b58],.dialog-block-suggestions-skeleton-item[data-v-26a64b58]:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse-26a64b58 1.5s ease-in-out infinite}@keyframes pulse-26a64b58{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container[data-v-18c9e78b]{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper[data-v-4f5901c9]{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container[data-v-4f5901c9]{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input[data-v-4f5901c9]{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-inline-end:35px}.dialog-input-submit[data-v-4f5901c9]{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);inset-inline-end:4px;border:unset}.dialog-input-submit[data-v-4f5901c9]:disabled{opacity:.5}.dialog-block-container[data-v-c57aa677]{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container[data-v-c57aa677]>*{box-sizing:border-box}
|
package/dist/dialog-vue.js
CHANGED
|
@@ -1,14 +1,45 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
|
|
1
|
+
import { defineComponent as _, createElementBlock as u, openBlock as l, createElementVNode as c, toDisplayString as E, Fragment as A, renderList as N, createVNode as v, createBlock as k, ref as m, withDirectives as O, withKeys as y, vModelText as U, onMounted as b, watch as L, renderSlot as $, computed as T, withCtx as K, createCommentVNode as B } from "vue";
|
|
2
|
+
const V = /* @__PURE__ */ new Set(["ar", "he", "iw", "fa", "ur"]), P = (t) => t !== void 0 && V.has(t.trim().toLowerCase().slice(0, 2)), M = (t) => P(t) ? "rtl" : "ltr";
|
|
3
|
+
var h;
|
|
3
4
|
(function(t) {
|
|
4
|
-
t.OPEN_ASSISTANT = "open_assistant", t.CLOSE_ASSISTANT = "close_assistant", t.SEND_MESSAGE = "PRODUCT_QUESTION", t.SEND_GENERIC_QUESTION = "GENERIC_QUESTION", t.TRACK_ADD_TO_CART = "TRACK_ADD_TO_CART", t.TRACK_SUBMIT_CHECKOUT = "TRACK_SUBMIT_CHECKOUT";
|
|
5
|
-
})(
|
|
6
|
-
var
|
|
5
|
+
t.OPEN_ASSISTANT = "open_assistant", t.CLOSE_ASSISTANT = "close_assistant", t.SEND_MESSAGE = "PRODUCT_QUESTION", t.SEND_GENERIC_QUESTION = "GENERIC_QUESTION", t.TRACK_ADD_TO_CART = "TRACK_ADD_TO_CART", t.TRACK_SUBMIT_CHECKOUT = "TRACK_SUBMIT_CHECKOUT", t.TRACK_VIEW_SEARCH_RESULTS = "TRACK_VIEW_SEARCH_RESULTS", t.TRACK_SELECT_SEARCH_RESULT = "TRACK_SELECT_SEARCH_RESULT";
|
|
6
|
+
})(h || (h = {}));
|
|
7
|
+
var I;
|
|
7
8
|
(function(t) {
|
|
8
9
|
t.USER_OPENED_ASSISTANT = "userOpenedAssistant", t.USER_CLOSED_ASSISTANT = "userClosedAssistant", t.USER_SENT_MESSAGE = "userSentMessage", t.USER_CLICKED_ON_PRODUCT_CARD = "userClickedOnProductCard", t.USER_OPENED_RECOMMENDATION = "userOpenedRecommendation", t.USER_ADDED_TO_CART = "userAddedToCart", t.USER_SEND_POSITIVE_FEEDBACK = "userSendPositiveFeedback", t.USER_SEND_NEGATIVE_FEEDBACK = "userSendNegativeFeedback";
|
|
9
|
-
})(
|
|
10
|
-
|
|
11
|
-
const
|
|
10
|
+
})(I || (I = {}));
|
|
11
|
+
h.TRACK_ADD_TO_CART, h.TRACK_SUBMIT_CHECKOUT, h.TRACK_VIEW_SEARCH_RESULTS, h.TRACK_SELECT_SEARCH_RESULT;
|
|
12
|
+
const R = "multiple installation methods detected:", q = () => typeof window > "u" ? void 0 : window, w = () => {
|
|
13
|
+
const t = q();
|
|
14
|
+
if (t !== void 0)
|
|
15
|
+
return t.dialog = t.dialog ?? {}, t.dialog.audit = t.dialog.audit ?? {
|
|
16
|
+
methods: [],
|
|
17
|
+
context: {},
|
|
18
|
+
capabilities: [],
|
|
19
|
+
warnings: []
|
|
20
|
+
}, t.dialog.audit;
|
|
21
|
+
}, x = (t) => {
|
|
22
|
+
if (t.warnings = t.warnings.filter((e) => !e.startsWith(R)), t.methods.length >= 2) {
|
|
23
|
+
const e = t.methods.map((o) => o.method).join(", ");
|
|
24
|
+
t.warnings.push(`${R} ${e}`);
|
|
25
|
+
}
|
|
26
|
+
}, H = (t, e) => e === void 0 ? t : {
|
|
27
|
+
version: (t == null ? void 0 : t.version) ?? e.version,
|
|
28
|
+
commit: (t == null ? void 0 : t.commit) ?? e.commit
|
|
29
|
+
}, F = (t) => {
|
|
30
|
+
const e = w();
|
|
31
|
+
if (e === void 0)
|
|
32
|
+
return;
|
|
33
|
+
const o = e.methods.find((n) => n.method === t.method);
|
|
34
|
+
if (o === void 0) {
|
|
35
|
+
e.methods.push({ ...t, registeredAt: (/* @__PURE__ */ new Date()).toISOString() }), x(e);
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
o.version = o.version ?? t.version, o.build = H(o.build, t.build), o.source = o.source ?? t.source;
|
|
39
|
+
}, G = (t) => {
|
|
40
|
+
const e = w();
|
|
41
|
+
e !== void 0 && (e.capabilities.includes(t) || e.capabilities.push(t));
|
|
42
|
+
}, j = { class: "dialog-block-header-container" }, Q = { class: "dialog-block-title" }, W = { class: "dialog-block-description" }, Z = /* @__PURE__ */ _({
|
|
12
43
|
__name: "DialogBlockHeader",
|
|
13
44
|
props: {
|
|
14
45
|
title: {},
|
|
@@ -16,31 +47,31 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
16
47
|
},
|
|
17
48
|
setup(t) {
|
|
18
49
|
const e = t;
|
|
19
|
-
return (
|
|
20
|
-
c("div",
|
|
21
|
-
c("div",
|
|
50
|
+
return (o, n) => (l(), u("div", j, [
|
|
51
|
+
c("div", Q, E(e.title ?? "Your expert"), 1),
|
|
52
|
+
c("div", W, E(e.description ?? "A question about this product?"), 1)
|
|
22
53
|
]));
|
|
23
54
|
}
|
|
24
|
-
}),
|
|
25
|
-
const
|
|
26
|
-
for (const [
|
|
27
|
-
|
|
28
|
-
return
|
|
29
|
-
},
|
|
55
|
+
}), S = (t, e) => {
|
|
56
|
+
const o = t.__vccOpts || t;
|
|
57
|
+
for (const [n, a] of e)
|
|
58
|
+
o[n] = a;
|
|
59
|
+
return o;
|
|
60
|
+
}, z = /* @__PURE__ */ S(Z, [["__scopeId", "data-v-28e6dda7"]]), X = {
|
|
30
61
|
width: "20",
|
|
31
62
|
height: "20",
|
|
32
63
|
viewBox: "0 0 20 20",
|
|
33
64
|
fill: "none",
|
|
34
65
|
xmlns: "http://www.w3.org/2000/svg"
|
|
35
|
-
},
|
|
66
|
+
}, Y = { "clip-path": "url(#clip0_466_934)" }, J = ["stroke"], ee = ["stroke"], te = /* @__PURE__ */ _({
|
|
36
67
|
__name: "AiStarsIcon",
|
|
37
68
|
props: {
|
|
38
69
|
color: {}
|
|
39
70
|
},
|
|
40
71
|
setup(t) {
|
|
41
72
|
const e = t;
|
|
42
|
-
return (
|
|
43
|
-
c("g",
|
|
73
|
+
return (o, n) => (l(), u("svg", X, [
|
|
74
|
+
c("g", Y, [
|
|
44
75
|
c("path", {
|
|
45
76
|
d: `M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011
|
|
46
77
|
12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684
|
|
@@ -56,7 +87,7 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
56
87
|
"stroke-width": "1.5",
|
|
57
88
|
"stroke-linecap": "round",
|
|
58
89
|
"stroke-linejoin": "round"
|
|
59
|
-
}, null, 8,
|
|
90
|
+
}, null, 8, J),
|
|
60
91
|
c("path", {
|
|
61
92
|
d: `M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175
|
|
62
93
|
5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687
|
|
@@ -72,9 +103,9 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
72
103
|
"stroke-width": "1.5",
|
|
73
104
|
"stroke-linecap": "round",
|
|
74
105
|
"stroke-linejoin": "round"
|
|
75
|
-
}, null, 8,
|
|
106
|
+
}, null, 8, ee)
|
|
76
107
|
]),
|
|
77
|
-
|
|
108
|
+
n[0] || (n[0] = c("defs", null, [
|
|
78
109
|
c("clipPath", { id: "clip0_466_934" }, [
|
|
79
110
|
c("rect", {
|
|
80
111
|
width: "20",
|
|
@@ -85,7 +116,7 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
85
116
|
], -1))
|
|
86
117
|
]));
|
|
87
118
|
}
|
|
88
|
-
}),
|
|
119
|
+
}), oe = ["onClick"], ne = { class: "dialog-block-suggestions-item-label" }, ie = /* @__PURE__ */ _({
|
|
89
120
|
__name: "DialogBlockSuggestions",
|
|
90
121
|
props: {
|
|
91
122
|
client: {},
|
|
@@ -95,36 +126,36 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
95
126
|
selectedVariantId: {}
|
|
96
127
|
},
|
|
97
128
|
setup(t) {
|
|
98
|
-
const e = t,
|
|
129
|
+
const e = t, o = (n) => {
|
|
99
130
|
e.client.sendProductMessage({
|
|
100
131
|
productId: e.productId,
|
|
101
132
|
productTitle: e.productTitle,
|
|
102
133
|
selectedVariantId: e.selectedVariantId,
|
|
103
|
-
question:
|
|
134
|
+
question: n,
|
|
104
135
|
fromQuestionSuggestion: !0
|
|
105
136
|
});
|
|
106
137
|
};
|
|
107
|
-
return (
|
|
108
|
-
key:
|
|
138
|
+
return (n, a) => (l(!0), u(A, null, N(e.questions, (i) => (l(), u("button", {
|
|
139
|
+
key: i.question,
|
|
109
140
|
class: "dialog-block-suggestions-item",
|
|
110
|
-
onClick: (
|
|
141
|
+
onClick: (r) => o(i.question)
|
|
111
142
|
}, [
|
|
112
|
-
|
|
143
|
+
v(te, {
|
|
113
144
|
class: "dialog-block-suggestions-item-icon",
|
|
114
145
|
color: e.client.theme.primaryColor
|
|
115
146
|
}, null, 8, ["color"]),
|
|
116
|
-
c("span",
|
|
117
|
-
], 8,
|
|
147
|
+
c("span", ne, E(i.question), 1)
|
|
148
|
+
], 8, oe))), 128));
|
|
118
149
|
}
|
|
119
|
-
}),
|
|
120
|
-
function
|
|
121
|
-
return
|
|
150
|
+
}), se = /* @__PURE__ */ S(ie, [["__scopeId", "data-v-db34d4b4"]]), ce = {};
|
|
151
|
+
function re(t, e) {
|
|
152
|
+
return l(), u(A, null, [
|
|
122
153
|
e[0] || (e[0] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
|
|
123
154
|
e[1] || (e[1] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
|
|
124
155
|
e[2] || (e[2] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1))
|
|
125
156
|
], 64);
|
|
126
157
|
}
|
|
127
|
-
const
|
|
158
|
+
const de = /* @__PURE__ */ S(ce, [["render", re], ["__scopeId", "data-v-26a64b58"]]), le = { class: "dialog-block-suggestions-container" }, ae = /* @__PURE__ */ _({
|
|
128
159
|
__name: "DialogBlockSuggestionsContainer",
|
|
129
160
|
props: {
|
|
130
161
|
client: {},
|
|
@@ -136,8 +167,8 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
136
167
|
},
|
|
137
168
|
setup(t) {
|
|
138
169
|
const e = t;
|
|
139
|
-
return (
|
|
140
|
-
e.isLoading || !e.questions ? (
|
|
170
|
+
return (o, n) => (l(), u("div", le, [
|
|
171
|
+
e.isLoading || !e.questions ? (l(), k(de, { key: 0 })) : (l(), k(se, {
|
|
141
172
|
key: 1,
|
|
142
173
|
client: e.client,
|
|
143
174
|
questions: e.questions,
|
|
@@ -147,30 +178,30 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
147
178
|
}, null, 8, ["client", "questions", "product-id", "product-title", "selected-variant-id"]))
|
|
148
179
|
]));
|
|
149
180
|
}
|
|
150
|
-
}),
|
|
181
|
+
}), ue = /* @__PURE__ */ S(ae, [["__scopeId", "data-v-18c9e78b"]]), _e = {
|
|
151
182
|
width: "20",
|
|
152
183
|
height: "20",
|
|
153
184
|
viewBox: "0 0 20 20",
|
|
154
185
|
fill: "none",
|
|
155
186
|
xmlns: "http://www.w3.org/2000/svg"
|
|
156
|
-
},
|
|
187
|
+
}, pe = ["stroke"], ge = /* @__PURE__ */ _({
|
|
157
188
|
__name: "ArrowIcon",
|
|
158
189
|
props: {
|
|
159
190
|
color: {}
|
|
160
191
|
},
|
|
161
192
|
setup(t) {
|
|
162
193
|
const e = t;
|
|
163
|
-
return (
|
|
194
|
+
return (o, n) => (l(), u("svg", _e, [
|
|
164
195
|
c("path", {
|
|
165
196
|
d: "M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",
|
|
166
197
|
stroke: e.color || "#ffffff",
|
|
167
198
|
"stroke-width": "1.5",
|
|
168
199
|
"stroke-linecap": "round",
|
|
169
200
|
"stroke-linejoin": "round"
|
|
170
|
-
}, null, 8,
|
|
201
|
+
}, null, 8, pe)
|
|
171
202
|
]));
|
|
172
203
|
}
|
|
173
|
-
}),
|
|
204
|
+
}), Ce = ["placeholder"], he = ["disabled"], Se = /* @__PURE__ */ _({
|
|
174
205
|
__name: "DialogInput",
|
|
175
206
|
props: {
|
|
176
207
|
client: {},
|
|
@@ -180,96 +211,93 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
180
211
|
selectedVariantId: {}
|
|
181
212
|
},
|
|
182
213
|
setup(t) {
|
|
183
|
-
const e = t,
|
|
184
|
-
var
|
|
185
|
-
(
|
|
186
|
-
},
|
|
187
|
-
const
|
|
188
|
-
|
|
214
|
+
const e = t, o = m(), n = m(""), a = () => {
|
|
215
|
+
var r;
|
|
216
|
+
(r = o.value) == null || r.focus();
|
|
217
|
+
}, i = () => {
|
|
218
|
+
const r = n.value;
|
|
219
|
+
r.trim() && (e.client.sendProductMessage({
|
|
189
220
|
productId: e.productId,
|
|
190
221
|
productTitle: e.productTitle,
|
|
191
222
|
selectedVariantId: e.selectedVariantId,
|
|
192
|
-
question:
|
|
223
|
+
question: r,
|
|
193
224
|
fromQuestionSuggestion: !0
|
|
194
|
-
}),
|
|
225
|
+
}), n.value = "");
|
|
195
226
|
};
|
|
196
|
-
return (
|
|
227
|
+
return (r, d) => (l(), u("div", {
|
|
197
228
|
class: "dialog-input-wrapper",
|
|
198
229
|
onClick: a
|
|
199
230
|
}, [
|
|
200
|
-
|
|
231
|
+
O(c("input", {
|
|
201
232
|
id: "dialog-ask-anything-input-ai-input",
|
|
202
233
|
ref_key: "inputRef",
|
|
203
|
-
ref:
|
|
204
|
-
"onUpdate:modelValue":
|
|
234
|
+
ref: o,
|
|
235
|
+
"onUpdate:modelValue": d[0] || (d[0] = (p) => n.value = p),
|
|
205
236
|
class: "dialog-ask-anything-input-ai-input",
|
|
206
237
|
placeholder: e.placeholder ?? "Ask anything...",
|
|
207
|
-
onKeydown:
|
|
208
|
-
}, null, 40,
|
|
209
|
-
[
|
|
238
|
+
onKeydown: y(i, ["enter"])
|
|
239
|
+
}, null, 40, Ce), [
|
|
240
|
+
[U, n.value]
|
|
210
241
|
]),
|
|
211
242
|
c("button", {
|
|
212
243
|
id: "send-message-button-ai-input",
|
|
213
244
|
class: "dialog-input-submit",
|
|
214
|
-
disabled: !
|
|
215
|
-
onClick:
|
|
245
|
+
disabled: !n.value.trim(),
|
|
246
|
+
onClick: i
|
|
216
247
|
}, [
|
|
217
|
-
|
|
248
|
+
v(ge, {
|
|
218
249
|
color: e.client.theme.ctaTextColor
|
|
219
250
|
}, null, 8, ["color"])
|
|
220
|
-
], 8,
|
|
251
|
+
], 8, he)
|
|
221
252
|
]));
|
|
222
253
|
}
|
|
223
|
-
}),
|
|
254
|
+
}), me = /* @__PURE__ */ S(Se, [["__scopeId", "data-v-4f5901c9"]]), fe = /* @__PURE__ */ _({
|
|
224
255
|
__name: "ThemeProvider",
|
|
225
256
|
props: {
|
|
226
257
|
theme: {}
|
|
227
258
|
},
|
|
228
259
|
setup(t) {
|
|
229
|
-
const e = t,
|
|
230
|
-
|
|
231
|
-
const
|
|
232
|
-
if (
|
|
233
|
-
if (typeof
|
|
234
|
-
Object.keys(
|
|
235
|
-
var
|
|
236
|
-
const
|
|
237
|
-
if (
|
|
238
|
-
const
|
|
239
|
-
|
|
240
|
-
`--dialog-theme-${
|
|
241
|
-
(
|
|
260
|
+
const e = t, o = document.body, n = (i) => i.replace(/([A-Z])/g, "-$1").toLowerCase(), a = (i) => {
|
|
261
|
+
i && Object.keys(i).forEach((r) => {
|
|
262
|
+
const d = r, p = n(r);
|
|
263
|
+
if (i[d] !== void 0) {
|
|
264
|
+
if (typeof i[d] == "object") {
|
|
265
|
+
Object.keys(i[d]).forEach((C) => {
|
|
266
|
+
var g;
|
|
267
|
+
const s = C;
|
|
268
|
+
if (s !== void 0) {
|
|
269
|
+
const f = n(C), D = i[d];
|
|
270
|
+
o.style.setProperty(
|
|
271
|
+
`--dialog-theme-${p}-${f}`,
|
|
272
|
+
(g = D[s]) == null ? void 0 : g.toString()
|
|
242
273
|
);
|
|
243
274
|
}
|
|
244
275
|
});
|
|
245
276
|
return;
|
|
246
277
|
}
|
|
247
|
-
if (
|
|
248
|
-
const
|
|
249
|
-
|
|
278
|
+
if (d === "ctaBorderType") {
|
|
279
|
+
const C = i[d] === "rounded" ? "24px" : "0";
|
|
280
|
+
o.style.setProperty(`--dialog-theme-${p}`, C);
|
|
250
281
|
return;
|
|
251
282
|
}
|
|
252
|
-
|
|
253
|
-
`--dialog-theme-${
|
|
254
|
-
|
|
283
|
+
o.style.setProperty(
|
|
284
|
+
`--dialog-theme-${p}`,
|
|
285
|
+
i[d].toString()
|
|
255
286
|
);
|
|
256
287
|
}
|
|
257
288
|
});
|
|
258
289
|
};
|
|
259
|
-
return
|
|
290
|
+
return b(() => {
|
|
260
291
|
e.theme && a(e.theme);
|
|
261
|
-
}),
|
|
292
|
+
}), L(
|
|
262
293
|
() => e.theme,
|
|
263
|
-
(
|
|
264
|
-
|
|
294
|
+
(i) => {
|
|
295
|
+
i && a(i);
|
|
265
296
|
},
|
|
266
297
|
{ deep: !0 }
|
|
267
|
-
), (
|
|
298
|
+
), (i, r) => $(i.$slots, "default");
|
|
268
299
|
}
|
|
269
|
-
}),
|
|
270
|
-
id: "dialog-instant",
|
|
271
|
-
class: "dialog-block-container"
|
|
272
|
-
}, ue = /* @__PURE__ */ p({
|
|
300
|
+
}), Te = ["dir"], ve = /* @__PURE__ */ _({
|
|
273
301
|
__name: "DialogProductBlock",
|
|
274
302
|
props: {
|
|
275
303
|
client: {},
|
|
@@ -279,68 +307,86 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
279
307
|
enableInput: { type: Boolean, default: !0 }
|
|
280
308
|
},
|
|
281
309
|
setup(t) {
|
|
282
|
-
const e = t
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
})
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
s
|
|
310
|
+
const e = t;
|
|
311
|
+
b(() => {
|
|
312
|
+
F({
|
|
313
|
+
method: "vue",
|
|
314
|
+
version: "3.2.0"
|
|
315
|
+
}), G("pdp-block");
|
|
316
|
+
});
|
|
317
|
+
const o = m(!0), n = m(void 0), a = m(0), i = T(() => {
|
|
318
|
+
var s;
|
|
319
|
+
return o.value ? "" : (s = n.value) == null ? void 0 : s.assistantName;
|
|
320
|
+
}), r = T(() => {
|
|
321
|
+
var s;
|
|
322
|
+
return o.value ? "" : (s = n.value) == null ? void 0 : s.description;
|
|
323
|
+
}), d = T(() => {
|
|
324
|
+
var s;
|
|
325
|
+
return o.value ? "" : (s = n.value) == null ? void 0 : s.inputPlaceholder;
|
|
326
|
+
}), p = T(
|
|
327
|
+
() => {
|
|
328
|
+
var s;
|
|
329
|
+
return M(
|
|
330
|
+
(s = e.client.getLocalizationInformations()) == null ? void 0 : s.languageCode
|
|
331
|
+
);
|
|
332
|
+
}
|
|
333
|
+
), C = async () => {
|
|
334
|
+
const s = ++a.value;
|
|
335
|
+
o.value = !0, n.value = void 0;
|
|
294
336
|
try {
|
|
295
337
|
const g = await e.client.getSuggestions(e.productId);
|
|
296
|
-
|
|
338
|
+
s === a.value && (n.value = g);
|
|
297
339
|
} catch (g) {
|
|
298
340
|
console.error("error", g);
|
|
299
341
|
} finally {
|
|
300
|
-
|
|
342
|
+
s === a.value && (o.value = !1);
|
|
301
343
|
}
|
|
302
344
|
};
|
|
303
|
-
return
|
|
345
|
+
return L(
|
|
304
346
|
() => [e.client, e.productId],
|
|
305
347
|
() => {
|
|
306
|
-
|
|
348
|
+
C();
|
|
307
349
|
},
|
|
308
350
|
{ immediate: !0 }
|
|
309
|
-
), (
|
|
351
|
+
), (s, g) => (l(), k(fe, {
|
|
310
352
|
theme: e.client.theme
|
|
311
353
|
}, {
|
|
312
|
-
default:
|
|
313
|
-
var
|
|
354
|
+
default: K(() => {
|
|
355
|
+
var f;
|
|
314
356
|
return [
|
|
315
|
-
c("div",
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
357
|
+
c("div", {
|
|
358
|
+
id: "dialog-instant",
|
|
359
|
+
class: "dialog-block-container",
|
|
360
|
+
dir: p.value
|
|
361
|
+
}, [
|
|
362
|
+
v(z, {
|
|
363
|
+
title: i.value,
|
|
364
|
+
description: r.value
|
|
319
365
|
}, null, 8, ["title", "description"]),
|
|
320
|
-
|
|
366
|
+
v(ue, {
|
|
321
367
|
client: e.client,
|
|
322
|
-
questions: (
|
|
323
|
-
"is-loading":
|
|
368
|
+
questions: (f = n.value) == null ? void 0 : f.questions,
|
|
369
|
+
"is-loading": o.value,
|
|
324
370
|
"product-id": e.productId,
|
|
325
371
|
"product-title": e.productTitle,
|
|
326
372
|
"selected-variant-id": e == null ? void 0 : e.selectedVariantId
|
|
327
373
|
}, null, 8, ["client", "questions", "is-loading", "product-id", "product-title", "selected-variant-id"]),
|
|
328
|
-
e.enableInput ? (
|
|
374
|
+
e.enableInput ? (l(), k(me, {
|
|
329
375
|
key: 0,
|
|
330
376
|
client: e.client,
|
|
331
|
-
placeholder:
|
|
377
|
+
placeholder: d.value,
|
|
332
378
|
"product-id": e.productId,
|
|
333
379
|
"product-title": e.productTitle,
|
|
334
380
|
"selected-variant-id": e == null ? void 0 : e.selectedVariantId
|
|
335
381
|
}, null, 8, ["client", "placeholder", "product-id", "product-title", "selected-variant-id"])) : B("", !0)
|
|
336
|
-
])
|
|
382
|
+
], 8, Te)
|
|
337
383
|
];
|
|
338
384
|
}),
|
|
339
385
|
_: 1
|
|
340
386
|
}, 8, ["theme"]));
|
|
341
387
|
}
|
|
342
|
-
}),
|
|
388
|
+
}), Ee = /* @__PURE__ */ S(ve, [["__scopeId", "data-v-c57aa677"]]);
|
|
343
389
|
export {
|
|
344
|
-
|
|
345
|
-
|
|
390
|
+
me as DialogInput,
|
|
391
|
+
Ee as DialogProductBlock
|
|
346
392
|
};
|
package/dist/dialog-vue.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a["dialog-vue"]={},a.Vue))})(this,(function(a,e){"use strict";var
|
|
1
|
+
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a["dialog-vue"]={},a.Vue))})(this,(function(a,e){"use strict";const E=new Set(["ar","he","iw","fa","ur"]),T=o=>o!==void 0&&E.has(o.trim().toLowerCase().slice(0,2)),I=o=>T(o)?"rtl":"ltr";var _;(function(o){o.OPEN_ASSISTANT="open_assistant",o.CLOSE_ASSISTANT="close_assistant",o.SEND_MESSAGE="PRODUCT_QUESTION",o.SEND_GENERIC_QUESTION="GENERIC_QUESTION",o.TRACK_ADD_TO_CART="TRACK_ADD_TO_CART",o.TRACK_SUBMIT_CHECKOUT="TRACK_SUBMIT_CHECKOUT",o.TRACK_VIEW_SEARCH_RESULTS="TRACK_VIEW_SEARCH_RESULTS",o.TRACK_SELECT_SEARCH_RESULT="TRACK_SELECT_SEARCH_RESULT"})(_||(_={}));var C;(function(o){o.USER_OPENED_ASSISTANT="userOpenedAssistant",o.USER_CLOSED_ASSISTANT="userClosedAssistant",o.USER_SENT_MESSAGE="userSentMessage",o.USER_CLICKED_ON_PRODUCT_CARD="userClickedOnProductCard",o.USER_OPENED_RECOMMENDATION="userOpenedRecommendation",o.USER_ADDED_TO_CART="userAddedToCart",o.USER_SEND_POSITIVE_FEEDBACK="userSendPositiveFeedback",o.USER_SEND_NEGATIVE_FEEDBACK="userSendNegativeFeedback"})(C||(C={})),_.TRACK_ADD_TO_CART,_.TRACK_SUBMIT_CHECKOUT,_.TRACK_VIEW_SEARCH_RESULTS,_.TRACK_SELECT_SEARCH_RESULT;const h="multiple installation methods detected:",R=()=>typeof window>"u"?void 0:window,S=()=>{const o=R();if(o!==void 0)return o.dialog=o.dialog??{},o.dialog.audit=o.dialog.audit??{methods:[],context:{},capabilities:[],warnings:[]},o.dialog.audit},b=o=>{if(o.warnings=o.warnings.filter(t=>!t.startsWith(h)),o.methods.length>=2){const t=o.methods.map(n=>n.method).join(", ");o.warnings.push(`${h} ${t}`)}},A=(o,t)=>t===void 0?o:{version:(o==null?void 0:o.version)??t.version,commit:(o==null?void 0:o.commit)??t.commit},N=o=>{const t=S();if(t===void 0)return;const n=t.methods.find(i=>i.method===o.method);if(n===void 0){t.methods.push({...o,registeredAt:new Date().toISOString()}),b(t);return}n.version=n.version??o.version,n.build=A(n.build,o.build),n.source=n.source??o.source},B=o=>{const t=S();t!==void 0&&(t.capabilities.includes(o)||t.capabilities.push(o))},V={class:"dialog-block-header-container"},L={class:"dialog-block-title"},D={class:"dialog-block-description"},w=e.defineComponent({__name:"DialogBlockHeader",props:{title:{},description:{}},setup(o){const t=o;return(n,i)=>(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("div",L,e.toDisplayString(t.title??"Your expert"),1),e.createElementVNode("div",D,e.toDisplayString(t.description??"A question about this product?"),1)]))}}),m=(o,t)=>{const n=o.__vccOpts||o;for(const[i,d]of t)n[i]=d;return n},y=m(w,[["__scopeId","data-v-28e6dda7"]]),O={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},$={"clip-path":"url(#clip0_466_934)"},U=["stroke"],K=["stroke"],P=e.defineComponent({__name:"AiStarsIcon",props:{color:{}},setup(o){const t=o;return(n,i)=>(e.openBlock(),e.createElementBlock("svg",O,[e.createElementVNode("g",$,[e.createElementVNode("path",{d:`M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011
|
|
2
2
|
12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684
|
|
3
3
|
13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559
|
|
4
4
|
15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418
|
|
8
8
|
13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225
|
|
9
9
|
13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675
|
|
10
|
-
10.8333Z`,stroke:t.color||"#181825","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,
|
|
10
|
+
10.8333Z`,stroke:t.color||"#181825","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,U),e.createElementVNode("path",{d:`M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175
|
|
11
11
|
5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687
|
|
12
12
|
6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632
|
|
13
13
|
8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348
|
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043
|
|
17
17
|
6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207
|
|
18
18
|
5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001
|
|
19
|
-
1.66666Z`,stroke:t.color||"#181825","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,
|
|
19
|
+
1.66666Z`,stroke:t.color||"#181825","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,K)]),i[0]||(i[0]=e.createElementVNode("defs",null,[e.createElementVNode("clipPath",{id:"clip0_466_934"},[e.createElementVNode("rect",{width:"20",height:"20",fill:"white"})])],-1))]))}}),M=["onClick"],q={class:"dialog-block-suggestions-item-label"},x=m(e.defineComponent({__name:"DialogBlockSuggestions",props:{client:{},questions:{},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o,n=i=>{t.client.sendProductMessage({productId:t.productId,productTitle:t.productTitle,selectedVariantId:t.selectedVariantId,question:i,fromQuestionSuggestion:!0})};return(i,d)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.questions,c=>(e.openBlock(),e.createElementBlock("button",{key:c.question,class:"dialog-block-suggestions-item",onClick:l=>n(c.question)},[e.createVNode(P,{class:"dialog-block-suggestions-item-icon",color:t.client.theme.primaryColor},null,8,["color"]),e.createElementVNode("span",q,e.toDisplayString(c.question),1)],8,M))),128))}}),[["__scopeId","data-v-db34d4b4"]]),H={};function F(o,t){return e.openBlock(),e.createElementBlock(e.Fragment,null,[t[0]||(t[0]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1)),t[1]||(t[1]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1)),t[2]||(t[2]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1))],64)}const j=m(H,[["render",F],["__scopeId","data-v-26a64b58"]]),G={class:"dialog-block-suggestions-container"},Q=m(e.defineComponent({__name:"DialogBlockSuggestionsContainer",props:{client:{},questions:{},isLoading:{type:Boolean},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o;return(n,i)=>(e.openBlock(),e.createElementBlock("div",G,[t.isLoading||!t.questions?(e.openBlock(),e.createBlock(j,{key:0})):(e.openBlock(),e.createBlock(x,{key:1,client:t.client,questions:t.questions,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t.selectedVariantId},null,8,["client","questions","product-id","product-title","selected-variant-id"]))]))}}),[["__scopeId","data-v-18c9e78b"]]),W={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Z=["stroke"],z=e.defineComponent({__name:"ArrowIcon",props:{color:{}},setup(o){const t=o;return(n,i)=>(e.openBlock(),e.createElementBlock("svg",W,[e.createElementVNode("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:t.color||"#ffffff","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,Z)]))}}),X=["placeholder"],Y=["disabled"],k=m(e.defineComponent({__name:"DialogInput",props:{client:{},placeholder:{},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o,n=e.ref(),i=e.ref(""),d=()=>{var l;(l=n.value)==null||l.focus()},c=()=>{const l=i.value;l.trim()&&(t.client.sendProductMessage({productId:t.productId,productTitle:t.productTitle,selectedVariantId:t.selectedVariantId,question:l,fromQuestionSuggestion:!0}),i.value="")};return(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:"dialog-input-wrapper",onClick:d},[e.withDirectives(e.createElementVNode("input",{id:"dialog-ask-anything-input-ai-input",ref_key:"inputRef",ref:n,"onUpdate:modelValue":r[0]||(r[0]=u=>i.value=u),class:"dialog-ask-anything-input-ai-input",placeholder:t.placeholder??"Ask anything...",onKeydown:e.withKeys(c,["enter"])},null,40,X),[[e.vModelText,i.value]]),e.createElementVNode("button",{id:"send-message-button-ai-input",class:"dialog-input-submit",disabled:!i.value.trim(),onClick:c},[e.createVNode(z,{color:t.client.theme.ctaTextColor},null,8,["color"])],8,Y)]))}}),[["__scopeId","data-v-4f5901c9"]]),J=e.defineComponent({__name:"ThemeProvider",props:{theme:{}},setup(o){const t=o,n=document.body,i=c=>c.replace(/([A-Z])/g,"-$1").toLowerCase(),d=c=>{c&&Object.keys(c).forEach(l=>{const r=l,u=i(l);if(c[r]!==void 0){if(typeof c[r]=="object"){Object.keys(c[r]).forEach(g=>{var p;const s=g;if(s!==void 0){const f=i(g),te=c[r];n.style.setProperty(`--dialog-theme-${u}-${f}`,(p=te[s])==null?void 0:p.toString())}});return}if(r==="ctaBorderType"){const g=c[r]==="rounded"?"24px":"0";n.style.setProperty(`--dialog-theme-${u}`,g);return}n.style.setProperty(`--dialog-theme-${u}`,c[r].toString())}})};return e.onMounted(()=>{t.theme&&d(t.theme)}),e.watch(()=>t.theme,c=>{c&&d(c)},{deep:!0}),(c,l)=>e.renderSlot(c.$slots,"default")}}),v=["dir"],ee=m(e.defineComponent({__name:"DialogProductBlock",props:{client:{},productId:{},productTitle:{},selectedVariantId:{default:void 0},enableInput:{type:Boolean,default:!0}},setup(o){const t=o;e.onMounted(()=>{N({method:"vue",version:"3.2.0"}),B("pdp-block")});const n=e.ref(!0),i=e.ref(void 0),d=e.ref(0),c=e.computed(()=>{var s;return n.value?"":(s=i.value)==null?void 0:s.assistantName}),l=e.computed(()=>{var s;return n.value?"":(s=i.value)==null?void 0:s.description}),r=e.computed(()=>{var s;return n.value?"":(s=i.value)==null?void 0:s.inputPlaceholder}),u=e.computed(()=>{var s;return I((s=t.client.getLocalizationInformations())==null?void 0:s.languageCode)}),g=async()=>{const s=++d.value;n.value=!0,i.value=void 0;try{const p=await t.client.getSuggestions(t.productId);s===d.value&&(i.value=p)}catch(p){console.error("error",p)}finally{s===d.value&&(n.value=!1)}};return e.watch(()=>[t.client,t.productId],()=>{g()},{immediate:!0}),(s,p)=>(e.openBlock(),e.createBlock(J,{theme:t.client.theme},{default:e.withCtx(()=>{var f;return[e.createElementVNode("div",{id:"dialog-instant",class:"dialog-block-container",dir:u.value},[e.createVNode(y,{title:c.value,description:l.value},null,8,["title","description"]),e.createVNode(Q,{client:t.client,questions:(f=i.value)==null?void 0:f.questions,"is-loading":n.value,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t==null?void 0:t.selectedVariantId},null,8,["client","questions","is-loading","product-id","product-title","selected-variant-id"]),t.enableInput?(e.openBlock(),e.createBlock(k,{key:0,client:t.client,placeholder:r.value,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t==null?void 0:t.selectedVariantId},null,8,["client","placeholder","product-id","product-title","selected-variant-id"])):e.createCommentVNode("",!0)],8,v)]}),_:1},8,["theme"]))}}),[["__scopeId","data-v-c57aa677"]]);a.DialogInput=k,a.DialogProductBlock=ee,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@askdialog/dialog-vue",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "3.0
|
|
4
|
+
"version": "3.2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/dialog-vue.umd.js",
|
|
7
7
|
"module": "./dist/dialog-vue.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dist"
|
|
20
20
|
],
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@askdialog/dialog-sdk": "^2.0
|
|
22
|
+
"@askdialog/dialog-sdk": "^2.1.0",
|
|
23
23
|
"vue": "^3.0.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"eslint-plugin-vue": "^10.0.0",
|
|
30
30
|
"vite-plugin-eslint": "^1.8.1",
|
|
31
31
|
"vue-tsc": "^2.2.4",
|
|
32
|
-
"@askdialog/dialog-sdk": "2.0
|
|
32
|
+
"@askdialog/dialog-sdk": "2.8.0"
|
|
33
33
|
},
|
|
34
34
|
"author": "Dialog",
|
|
35
35
|
"publishConfig": {
|