@askdialog/dialog-vue 3.0.2 → 3.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-vue.css +1 -1
- package/dist/dialog-vue.js +151 -114
- 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-fb1910ce]{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-fb1910ce]:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label[data-v-fb1910ce]{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:left;flex:1}.dialog-block-suggestions-item-icon path[data-v-fb1910ce]{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-7649af7c]{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-7649af7c]{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input[data-v-7649af7c]{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-right:35px}.dialog-input-submit[data-v-7649af7c]{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);right:4px;border:unset}.dialog-input-submit[data-v-7649af7c]:disabled{opacity:.5}.dialog-block-container[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-fb1910ce]{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-fb1910ce]:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label[data-v-fb1910ce]{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:left;flex:1}.dialog-block-suggestions-item-icon path[data-v-fb1910ce]{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-7649af7c]{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-7649af7c]{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input[data-v-7649af7c]{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-right:35px}.dialog-input-submit[data-v-7649af7c]{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);right:4px;border:unset}.dialog-input-submit[data-v-7649af7c]:disabled{opacity:.5}.dialog-block-container[data-v-7e33975d]{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-7e33975d]>*{box-sizing:border-box}
|
package/dist/dialog-vue.js
CHANGED
|
@@ -1,14 +1,44 @@
|
|
|
1
|
-
import { defineComponent as p, createElementBlock as u, openBlock as
|
|
2
|
-
var
|
|
1
|
+
import { defineComponent as p, createElementBlock as u, openBlock as l, createElementVNode as c, toDisplayString as I, Fragment as E, renderList as O, createVNode as C, createBlock as v, ref as f, withDirectives as y, withKeys as $, vModelText as L, onMounted as D, watch as w, renderSlot as B, computed as S, withCtx as P, createCommentVNode as U } from "vue";
|
|
2
|
+
var k;
|
|
3
3
|
(function(t) {
|
|
4
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
|
-
})(
|
|
5
|
+
})(k || (k = {}));
|
|
6
6
|
var T;
|
|
7
7
|
(function(t) {
|
|
8
8
|
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
9
|
})(T || (T = {}));
|
|
10
|
-
|
|
11
|
-
const
|
|
10
|
+
k.TRACK_ADD_TO_CART, k.TRACK_SUBMIT_CHECKOUT;
|
|
11
|
+
const b = "multiple installation methods detected:", V = () => typeof window > "u" ? void 0 : window, A = () => {
|
|
12
|
+
const t = V();
|
|
13
|
+
if (t !== void 0)
|
|
14
|
+
return t.dialog = t.dialog ?? {}, t.dialog.audit = t.dialog.audit ?? {
|
|
15
|
+
methods: [],
|
|
16
|
+
context: {},
|
|
17
|
+
capabilities: [],
|
|
18
|
+
warnings: []
|
|
19
|
+
}, t.dialog.audit;
|
|
20
|
+
}, M = (t) => {
|
|
21
|
+
if (t.warnings = t.warnings.filter((e) => !e.startsWith(b)), t.methods.length >= 2) {
|
|
22
|
+
const e = t.methods.map((o) => o.method).join(", ");
|
|
23
|
+
t.warnings.push(`${b} ${e}`);
|
|
24
|
+
}
|
|
25
|
+
}, K = (t, e) => e === void 0 ? t : {
|
|
26
|
+
version: (t == null ? void 0 : t.version) ?? e.version,
|
|
27
|
+
commit: (t == null ? void 0 : t.commit) ?? e.commit
|
|
28
|
+
}, q = (t) => {
|
|
29
|
+
const e = A();
|
|
30
|
+
if (e === void 0)
|
|
31
|
+
return;
|
|
32
|
+
const o = e.methods.find((n) => n.method === t.method);
|
|
33
|
+
if (o === void 0) {
|
|
34
|
+
e.methods.push({ ...t, registeredAt: (/* @__PURE__ */ new Date()).toISOString() }), M(e);
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
o.version = o.version ?? t.version, o.build = K(o.build, t.build), o.source = o.source ?? t.source;
|
|
38
|
+
}, x = (t) => {
|
|
39
|
+
const e = A();
|
|
40
|
+
e !== void 0 && (e.capabilities.includes(t) || e.capabilities.push(t));
|
|
41
|
+
}, F = { class: "dialog-block-header-container" }, j = { class: "dialog-block-title" }, H = { class: "dialog-block-description" }, G = /* @__PURE__ */ p({
|
|
12
42
|
__name: "DialogBlockHeader",
|
|
13
43
|
props: {
|
|
14
44
|
title: {},
|
|
@@ -16,31 +46,31 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
16
46
|
},
|
|
17
47
|
setup(t) {
|
|
18
48
|
const e = t;
|
|
19
|
-
return (
|
|
20
|
-
c("div",
|
|
21
|
-
c("div",
|
|
49
|
+
return (o, n) => (l(), u("div", F, [
|
|
50
|
+
c("div", j, I(e.title ?? "Your expert"), 1),
|
|
51
|
+
c("div", H, I(e.description ?? "A question about this product?"), 1)
|
|
22
52
|
]));
|
|
23
53
|
}
|
|
24
|
-
}),
|
|
25
|
-
const
|
|
26
|
-
for (const [
|
|
27
|
-
|
|
28
|
-
return
|
|
29
|
-
},
|
|
54
|
+
}), h = (t, e) => {
|
|
55
|
+
const o = t.__vccOpts || t;
|
|
56
|
+
for (const [n, a] of e)
|
|
57
|
+
o[n] = a;
|
|
58
|
+
return o;
|
|
59
|
+
}, Q = /* @__PURE__ */ h(G, [["__scopeId", "data-v-28e6dda7"]]), W = {
|
|
30
60
|
width: "20",
|
|
31
61
|
height: "20",
|
|
32
62
|
viewBox: "0 0 20 20",
|
|
33
63
|
fill: "none",
|
|
34
64
|
xmlns: "http://www.w3.org/2000/svg"
|
|
35
|
-
},
|
|
65
|
+
}, Z = { "clip-path": "url(#clip0_466_934)" }, X = ["stroke"], Y = ["stroke"], z = /* @__PURE__ */ p({
|
|
36
66
|
__name: "AiStarsIcon",
|
|
37
67
|
props: {
|
|
38
68
|
color: {}
|
|
39
69
|
},
|
|
40
70
|
setup(t) {
|
|
41
71
|
const e = t;
|
|
42
|
-
return (
|
|
43
|
-
c("g",
|
|
72
|
+
return (o, n) => (l(), u("svg", W, [
|
|
73
|
+
c("g", Z, [
|
|
44
74
|
c("path", {
|
|
45
75
|
d: `M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011
|
|
46
76
|
12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684
|
|
@@ -56,7 +86,7 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
56
86
|
"stroke-width": "1.5",
|
|
57
87
|
"stroke-linecap": "round",
|
|
58
88
|
"stroke-linejoin": "round"
|
|
59
|
-
}, null, 8,
|
|
89
|
+
}, null, 8, X),
|
|
60
90
|
c("path", {
|
|
61
91
|
d: `M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175
|
|
62
92
|
5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687
|
|
@@ -72,9 +102,9 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
72
102
|
"stroke-width": "1.5",
|
|
73
103
|
"stroke-linecap": "round",
|
|
74
104
|
"stroke-linejoin": "round"
|
|
75
|
-
}, null, 8,
|
|
105
|
+
}, null, 8, Y)
|
|
76
106
|
]),
|
|
77
|
-
|
|
107
|
+
n[0] || (n[0] = c("defs", null, [
|
|
78
108
|
c("clipPath", { id: "clip0_466_934" }, [
|
|
79
109
|
c("rect", {
|
|
80
110
|
width: "20",
|
|
@@ -85,7 +115,7 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
85
115
|
], -1))
|
|
86
116
|
]));
|
|
87
117
|
}
|
|
88
|
-
}),
|
|
118
|
+
}), J = ["onClick"], ee = { class: "dialog-block-suggestions-item-label" }, te = /* @__PURE__ */ p({
|
|
89
119
|
__name: "DialogBlockSuggestions",
|
|
90
120
|
props: {
|
|
91
121
|
client: {},
|
|
@@ -95,36 +125,36 @@ const U = { class: "dialog-block-header-container" }, V = { class: "dialog-block
|
|
|
95
125
|
selectedVariantId: {}
|
|
96
126
|
},
|
|
97
127
|
setup(t) {
|
|
98
|
-
const e = t,
|
|
128
|
+
const e = t, o = (n) => {
|
|
99
129
|
e.client.sendProductMessage({
|
|
100
130
|
productId: e.productId,
|
|
101
131
|
productTitle: e.productTitle,
|
|
102
132
|
selectedVariantId: e.selectedVariantId,
|
|
103
|
-
question:
|
|
133
|
+
question: n,
|
|
104
134
|
fromQuestionSuggestion: !0
|
|
105
135
|
});
|
|
106
136
|
};
|
|
107
|
-
return (
|
|
108
|
-
key:
|
|
137
|
+
return (n, a) => (l(!0), u(E, null, O(e.questions, (i) => (l(), u("button", {
|
|
138
|
+
key: i.question,
|
|
109
139
|
class: "dialog-block-suggestions-item",
|
|
110
|
-
onClick: (
|
|
140
|
+
onClick: (r) => o(i.question)
|
|
111
141
|
}, [
|
|
112
|
-
|
|
142
|
+
C(z, {
|
|
113
143
|
class: "dialog-block-suggestions-item-icon",
|
|
114
144
|
color: e.client.theme.primaryColor
|
|
115
145
|
}, null, 8, ["color"]),
|
|
116
|
-
c("span",
|
|
117
|
-
], 8,
|
|
146
|
+
c("span", ee, I(i.question), 1)
|
|
147
|
+
], 8, J))), 128));
|
|
118
148
|
}
|
|
119
|
-
}),
|
|
120
|
-
function
|
|
121
|
-
return
|
|
149
|
+
}), oe = /* @__PURE__ */ h(te, [["__scopeId", "data-v-fb1910ce"]]), ne = {};
|
|
150
|
+
function ie(t, e) {
|
|
151
|
+
return l(), u(E, null, [
|
|
122
152
|
e[0] || (e[0] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
|
|
123
153
|
e[1] || (e[1] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1)),
|
|
124
154
|
e[2] || (e[2] = c("div", { class: "dialog-block-suggestions-skeleton-item" }, null, -1))
|
|
125
155
|
], 64);
|
|
126
156
|
}
|
|
127
|
-
const
|
|
157
|
+
const se = /* @__PURE__ */ h(ne, [["render", ie], ["__scopeId", "data-v-26a64b58"]]), ce = { class: "dialog-block-suggestions-container" }, re = /* @__PURE__ */ p({
|
|
128
158
|
__name: "DialogBlockSuggestionsContainer",
|
|
129
159
|
props: {
|
|
130
160
|
client: {},
|
|
@@ -136,8 +166,8 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
136
166
|
},
|
|
137
167
|
setup(t) {
|
|
138
168
|
const e = t;
|
|
139
|
-
return (
|
|
140
|
-
e.isLoading || !e.questions ? (
|
|
169
|
+
return (o, n) => (l(), u("div", ce, [
|
|
170
|
+
e.isLoading || !e.questions ? (l(), v(se, { key: 0 })) : (l(), v(oe, {
|
|
141
171
|
key: 1,
|
|
142
172
|
client: e.client,
|
|
143
173
|
questions: e.questions,
|
|
@@ -147,30 +177,30 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
147
177
|
}, null, 8, ["client", "questions", "product-id", "product-title", "selected-variant-id"]))
|
|
148
178
|
]));
|
|
149
179
|
}
|
|
150
|
-
}),
|
|
180
|
+
}), de = /* @__PURE__ */ h(re, [["__scopeId", "data-v-18c9e78b"]]), le = {
|
|
151
181
|
width: "20",
|
|
152
182
|
height: "20",
|
|
153
183
|
viewBox: "0 0 20 20",
|
|
154
184
|
fill: "none",
|
|
155
185
|
xmlns: "http://www.w3.org/2000/svg"
|
|
156
|
-
},
|
|
186
|
+
}, ae = ["stroke"], ue = /* @__PURE__ */ p({
|
|
157
187
|
__name: "ArrowIcon",
|
|
158
188
|
props: {
|
|
159
189
|
color: {}
|
|
160
190
|
},
|
|
161
191
|
setup(t) {
|
|
162
192
|
const e = t;
|
|
163
|
-
return (
|
|
193
|
+
return (o, n) => (l(), u("svg", le, [
|
|
164
194
|
c("path", {
|
|
165
195
|
d: "M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",
|
|
166
196
|
stroke: e.color || "#ffffff",
|
|
167
197
|
"stroke-width": "1.5",
|
|
168
198
|
"stroke-linecap": "round",
|
|
169
199
|
"stroke-linejoin": "round"
|
|
170
|
-
}, null, 8,
|
|
200
|
+
}, null, 8, ae)
|
|
171
201
|
]));
|
|
172
202
|
}
|
|
173
|
-
}),
|
|
203
|
+
}), pe = ["placeholder"], _e = ["disabled"], ge = /* @__PURE__ */ p({
|
|
174
204
|
__name: "DialogInput",
|
|
175
205
|
props: {
|
|
176
206
|
client: {},
|
|
@@ -180,96 +210,96 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
180
210
|
selectedVariantId: {}
|
|
181
211
|
},
|
|
182
212
|
setup(t) {
|
|
183
|
-
const e = t,
|
|
184
|
-
var
|
|
185
|
-
(
|
|
186
|
-
},
|
|
187
|
-
const
|
|
188
|
-
|
|
213
|
+
const e = t, o = f(), n = f(""), a = () => {
|
|
214
|
+
var r;
|
|
215
|
+
(r = o.value) == null || r.focus();
|
|
216
|
+
}, i = () => {
|
|
217
|
+
const r = n.value;
|
|
218
|
+
r.trim() && (e.client.sendProductMessage({
|
|
189
219
|
productId: e.productId,
|
|
190
220
|
productTitle: e.productTitle,
|
|
191
221
|
selectedVariantId: e.selectedVariantId,
|
|
192
|
-
question:
|
|
222
|
+
question: r,
|
|
193
223
|
fromQuestionSuggestion: !0
|
|
194
|
-
}),
|
|
224
|
+
}), n.value = "");
|
|
195
225
|
};
|
|
196
|
-
return (
|
|
226
|
+
return (r, d) => (l(), u("div", {
|
|
197
227
|
class: "dialog-input-wrapper",
|
|
198
228
|
onClick: a
|
|
199
229
|
}, [
|
|
200
|
-
|
|
230
|
+
y(c("input", {
|
|
201
231
|
id: "dialog-ask-anything-input-ai-input",
|
|
202
232
|
ref_key: "inputRef",
|
|
203
|
-
ref:
|
|
204
|
-
"onUpdate:modelValue":
|
|
233
|
+
ref: o,
|
|
234
|
+
"onUpdate:modelValue": d[0] || (d[0] = (_) => n.value = _),
|
|
205
235
|
class: "dialog-ask-anything-input-ai-input",
|
|
206
236
|
placeholder: e.placeholder ?? "Ask anything...",
|
|
207
|
-
onKeydown:
|
|
208
|
-
}, null, 40,
|
|
209
|
-
[
|
|
237
|
+
onKeydown: $(i, ["enter"])
|
|
238
|
+
}, null, 40, pe), [
|
|
239
|
+
[L, n.value]
|
|
210
240
|
]),
|
|
211
241
|
c("button", {
|
|
212
242
|
id: "send-message-button-ai-input",
|
|
213
243
|
class: "dialog-input-submit",
|
|
214
|
-
disabled: !
|
|
215
|
-
onClick:
|
|
244
|
+
disabled: !n.value.trim(),
|
|
245
|
+
onClick: i
|
|
216
246
|
}, [
|
|
217
|
-
|
|
247
|
+
C(ue, {
|
|
218
248
|
color: e.client.theme.ctaTextColor
|
|
219
249
|
}, null, 8, ["color"])
|
|
220
|
-
], 8,
|
|
250
|
+
], 8, _e)
|
|
221
251
|
]));
|
|
222
252
|
}
|
|
223
|
-
}),
|
|
253
|
+
}), he = /* @__PURE__ */ h(ge, [["__scopeId", "data-v-7649af7c"]]), me = /* @__PURE__ */ p({
|
|
224
254
|
__name: "ThemeProvider",
|
|
225
255
|
props: {
|
|
226
256
|
theme: {}
|
|
227
257
|
},
|
|
228
258
|
setup(t) {
|
|
229
|
-
const e = t,
|
|
230
|
-
|
|
231
|
-
const
|
|
232
|
-
if (
|
|
233
|
-
if (typeof
|
|
234
|
-
Object.keys(
|
|
235
|
-
var
|
|
236
|
-
const g =
|
|
259
|
+
const e = t, o = document.body, n = (i) => i.replace(/([A-Z])/g, "-$1").toLowerCase(), a = (i) => {
|
|
260
|
+
i && Object.keys(i).forEach((r) => {
|
|
261
|
+
const d = r, _ = n(r);
|
|
262
|
+
if (i[d] !== void 0) {
|
|
263
|
+
if (typeof i[d] == "object") {
|
|
264
|
+
Object.keys(i[d]).forEach((s) => {
|
|
265
|
+
var m;
|
|
266
|
+
const g = s;
|
|
237
267
|
if (g !== void 0) {
|
|
238
|
-
const
|
|
239
|
-
|
|
240
|
-
`--dialog-theme-${_}-${
|
|
241
|
-
(
|
|
268
|
+
const R = n(s), N = i[d];
|
|
269
|
+
o.style.setProperty(
|
|
270
|
+
`--dialog-theme-${_}-${R}`,
|
|
271
|
+
(m = N[g]) == null ? void 0 : m.toString()
|
|
242
272
|
);
|
|
243
273
|
}
|
|
244
274
|
});
|
|
245
275
|
return;
|
|
246
276
|
}
|
|
247
|
-
if (
|
|
248
|
-
const
|
|
249
|
-
|
|
277
|
+
if (d === "ctaBorderType") {
|
|
278
|
+
const s = i[d] === "rounded" ? "24px" : "0";
|
|
279
|
+
o.style.setProperty(`--dialog-theme-${_}`, s);
|
|
250
280
|
return;
|
|
251
281
|
}
|
|
252
|
-
|
|
282
|
+
o.style.setProperty(
|
|
253
283
|
`--dialog-theme-${_}`,
|
|
254
|
-
|
|
284
|
+
i[d].toString()
|
|
255
285
|
);
|
|
256
286
|
}
|
|
257
287
|
});
|
|
258
288
|
};
|
|
259
|
-
return
|
|
289
|
+
return D(() => {
|
|
260
290
|
e.theme && a(e.theme);
|
|
261
|
-
}),
|
|
291
|
+
}), w(
|
|
262
292
|
() => e.theme,
|
|
263
|
-
(
|
|
264
|
-
|
|
293
|
+
(i) => {
|
|
294
|
+
i && a(i);
|
|
265
295
|
},
|
|
266
296
|
{ deep: !0 }
|
|
267
|
-
), (
|
|
297
|
+
), (i, r) => B(i.$slots, "default");
|
|
268
298
|
}
|
|
269
|
-
}),
|
|
299
|
+
}), fe = {
|
|
270
300
|
id: "dialog-instant",
|
|
271
301
|
class: "dialog-block-container"
|
|
272
|
-
},
|
|
302
|
+
}, Ce = /* @__PURE__ */ p({
|
|
273
303
|
__name: "DialogProductBlock",
|
|
274
304
|
props: {
|
|
275
305
|
client: {},
|
|
@@ -279,68 +309,75 @@ const W = /* @__PURE__ */ C(z, [["render", J], ["__scopeId", "data-v-26a64b58"]]
|
|
|
279
309
|
enableInput: { type: Boolean, default: !0 }
|
|
280
310
|
},
|
|
281
311
|
setup(t) {
|
|
282
|
-
const e = t
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
})
|
|
289
|
-
|
|
290
|
-
|
|
312
|
+
const e = t;
|
|
313
|
+
D(() => {
|
|
314
|
+
q({
|
|
315
|
+
method: "vue",
|
|
316
|
+
version: "3.1.0"
|
|
317
|
+
}), x("pdp-block");
|
|
318
|
+
});
|
|
319
|
+
const o = f(!0), n = f(void 0), a = f(0), i = S(() => {
|
|
320
|
+
var s;
|
|
321
|
+
return o.value ? "" : (s = n.value) == null ? void 0 : s.assistantName;
|
|
322
|
+
}), r = S(() => {
|
|
323
|
+
var s;
|
|
324
|
+
return o.value ? "" : (s = n.value) == null ? void 0 : s.description;
|
|
325
|
+
}), d = S(() => {
|
|
326
|
+
var s;
|
|
327
|
+
return o.value ? "" : (s = n.value) == null ? void 0 : s.inputPlaceholder;
|
|
291
328
|
}), _ = async () => {
|
|
292
|
-
const
|
|
293
|
-
|
|
329
|
+
const s = ++a.value;
|
|
330
|
+
o.value = !0, n.value = void 0;
|
|
294
331
|
try {
|
|
295
332
|
const g = await e.client.getSuggestions(e.productId);
|
|
296
|
-
|
|
333
|
+
s === a.value && (n.value = g);
|
|
297
334
|
} catch (g) {
|
|
298
335
|
console.error("error", g);
|
|
299
336
|
} finally {
|
|
300
|
-
|
|
337
|
+
s === a.value && (o.value = !1);
|
|
301
338
|
}
|
|
302
339
|
};
|
|
303
|
-
return
|
|
340
|
+
return w(
|
|
304
341
|
() => [e.client, e.productId],
|
|
305
342
|
() => {
|
|
306
343
|
_();
|
|
307
344
|
},
|
|
308
345
|
{ immediate: !0 }
|
|
309
|
-
), (
|
|
346
|
+
), (s, g) => (l(), v(me, {
|
|
310
347
|
theme: e.client.theme
|
|
311
348
|
}, {
|
|
312
|
-
default:
|
|
313
|
-
var
|
|
349
|
+
default: P(() => {
|
|
350
|
+
var m;
|
|
314
351
|
return [
|
|
315
|
-
c("div",
|
|
316
|
-
|
|
317
|
-
title:
|
|
318
|
-
description:
|
|
352
|
+
c("div", fe, [
|
|
353
|
+
C(Q, {
|
|
354
|
+
title: i.value,
|
|
355
|
+
description: r.value
|
|
319
356
|
}, null, 8, ["title", "description"]),
|
|
320
|
-
|
|
357
|
+
C(de, {
|
|
321
358
|
client: e.client,
|
|
322
|
-
questions: (
|
|
323
|
-
"is-loading":
|
|
359
|
+
questions: (m = n.value) == null ? void 0 : m.questions,
|
|
360
|
+
"is-loading": o.value,
|
|
324
361
|
"product-id": e.productId,
|
|
325
362
|
"product-title": e.productTitle,
|
|
326
363
|
"selected-variant-id": e == null ? void 0 : e.selectedVariantId
|
|
327
364
|
}, null, 8, ["client", "questions", "is-loading", "product-id", "product-title", "selected-variant-id"]),
|
|
328
|
-
e.enableInput ? (
|
|
365
|
+
e.enableInput ? (l(), v(he, {
|
|
329
366
|
key: 0,
|
|
330
367
|
client: e.client,
|
|
331
|
-
placeholder:
|
|
368
|
+
placeholder: d.value,
|
|
332
369
|
"product-id": e.productId,
|
|
333
370
|
"product-title": e.productTitle,
|
|
334
371
|
"selected-variant-id": e == null ? void 0 : e.selectedVariantId
|
|
335
|
-
}, null, 8, ["client", "placeholder", "product-id", "product-title", "selected-variant-id"])) :
|
|
372
|
+
}, null, 8, ["client", "placeholder", "product-id", "product-title", "selected-variant-id"])) : U("", !0)
|
|
336
373
|
])
|
|
337
374
|
];
|
|
338
375
|
}),
|
|
339
376
|
_: 1
|
|
340
377
|
}, 8, ["theme"]));
|
|
341
378
|
}
|
|
342
|
-
}),
|
|
379
|
+
}), ke = /* @__PURE__ */ h(Ce, [["__scopeId", "data-v-7e33975d"]]);
|
|
343
380
|
export {
|
|
344
|
-
|
|
345
|
-
|
|
381
|
+
he as DialogInput,
|
|
382
|
+
ke as DialogProductBlock
|
|
346
383
|
};
|
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";var g;(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"})(g||(g={}));var f;(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"})(f||(f={})),g.TRACK_ADD_TO_CART,g.TRACK_SUBMIT_CHECKOUT;const h="multiple installation methods detected:",S=()=>typeof window>"u"?void 0:window,k=()=>{const o=S();if(o!==void 0)return o.dialog=o.dialog??{},o.dialog.audit=o.dialog.audit??{methods:[],context:{},capabilities:[],warnings:[]},o.dialog.audit},E=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}`)}},I=(o,t)=>t===void 0?o:{version:(o==null?void 0:o.version)??t.version,commit:(o==null?void 0:o.commit)??t.commit},T=o=>{const t=k();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()}),E(t);return}n.version=n.version??o.version,n.build=I(n.build,o.build),n.source=n.source??o.source},b=o=>{const t=k();t!==void 0&&(t.capabilities.includes(o)||t.capabilities.push(o))},N={class:"dialog-block-header-container"},B={class:"dialog-block-title"},D={class:"dialog-block-description"},V=e.defineComponent({__name:"DialogBlockHeader",props:{title:{},description:{}},setup(o){const t=o;return(n,i)=>(e.openBlock(),e.createElementBlock("div",N,[e.createElementVNode("div",B,e.toDisplayString(t.title??"Your expert"),1),e.createElementVNode("div",D,e.toDisplayString(t.description??"A question about this product?"),1)]))}}),_=(o,t)=>{const n=o.__vccOpts||o;for(const[i,r]of t)n[i]=r;return n},w=_(V,[["__scopeId","data-v-28e6dda7"]]),A={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},y={"clip-path":"url(#clip0_466_934)"},$=["stroke"],O=["stroke"],R=e.defineComponent({__name:"AiStarsIcon",props:{color:{}},setup(o){const t=o;return(n,i)=>(e.openBlock(),e.createElementBlock("svg",A,[e.createElementVNode("g",y,[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,$),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,O)]),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))]))}}),L=["onClick"],P={class:"dialog-block-suggestions-item-label"},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,r)=>(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(R,{class:"dialog-block-suggestions-item-icon",color:t.client.theme.primaryColor},null,8,["color"]),e.createElementVNode("span",P,e.toDisplayString(c.question),1)],8,L))),128))}}),[["__scopeId","data-v-fb1910ce"]]),U={};function K(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 q=_(U,[["render",K],["__scopeId","data-v-26a64b58"]]),x={class:"dialog-block-suggestions-container"},F=_(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",x,[t.isLoading||!t.questions?(e.openBlock(),e.createBlock(q,{key:0})):(e.openBlock(),e.createBlock(M,{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"]]),j={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},H=["stroke"],G=e.defineComponent({__name:"ArrowIcon",props:{color:{}},setup(o){const t=o;return(n,i)=>(e.openBlock(),e.createElementBlock("svg",j,[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,H)]))}}),Q=["placeholder"],W=["disabled"],C=_(e.defineComponent({__name:"DialogInput",props:{client:{},placeholder:{},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o,n=e.ref(),i=e.ref(""),r=()=>{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,d)=>(e.openBlock(),e.createElementBlock("div",{class:"dialog-input-wrapper",onClick:r},[e.withDirectives(e.createElementVNode("input",{id:"dialog-ask-anything-input-ai-input",ref_key:"inputRef",ref:n,"onUpdate:modelValue":d[0]||(d[0]=u=>i.value=u),class:"dialog-ask-anything-input-ai-input",placeholder:t.placeholder??"Ask anything...",onKeydown:e.withKeys(c,["enter"])},null,40,Q),[[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(G,{color:t.client.theme.ctaTextColor},null,8,["color"])],8,W)]))}}),[["__scopeId","data-v-7649af7c"]]),Z=e.defineComponent({__name:"ThemeProvider",props:{theme:{}},setup(o){const t=o,n=document.body,i=c=>c.replace(/([A-Z])/g,"-$1").toLowerCase(),r=c=>{c&&Object.keys(c).forEach(l=>{const d=l,u=i(l);if(c[d]!==void 0){if(typeof c[d]=="object"){Object.keys(c[d]).forEach(s=>{var m;const p=s;if(p!==void 0){const z=i(s),J=c[d];n.style.setProperty(`--dialog-theme-${u}-${z}`,(m=J[p])==null?void 0:m.toString())}});return}if(d==="ctaBorderType"){const s=c[d]==="rounded"?"24px":"0";n.style.setProperty(`--dialog-theme-${u}`,s);return}n.style.setProperty(`--dialog-theme-${u}`,c[d].toString())}})};return e.onMounted(()=>{t.theme&&r(t.theme)}),e.watch(()=>t.theme,c=>{c&&r(c)},{deep:!0}),(c,l)=>e.renderSlot(c.$slots,"default")}}),X={id:"dialog-instant",class:"dialog-block-container"},Y=_(e.defineComponent({__name:"DialogProductBlock",props:{client:{},productId:{},productTitle:{},selectedVariantId:{default:void 0},enableInput:{type:Boolean,default:!0}},setup(o){const t=o;e.onMounted(()=>{T({method:"vue",version:"3.1.0"}),b("pdp-block")});const n=e.ref(!0),i=e.ref(void 0),r=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}),d=e.computed(()=>{var s;return n.value?"":(s=i.value)==null?void 0:s.inputPlaceholder}),u=async()=>{const s=++r.value;n.value=!0,i.value=void 0;try{const p=await t.client.getSuggestions(t.productId);s===r.value&&(i.value=p)}catch(p){console.error("error",p)}finally{s===r.value&&(n.value=!1)}};return e.watch(()=>[t.client,t.productId],()=>{u()},{immediate:!0}),(s,p)=>(e.openBlock(),e.createBlock(Z,{theme:t.client.theme},{default:e.withCtx(()=>{var m;return[e.createElementVNode("div",X,[e.createVNode(w,{title:c.value,description:l.value},null,8,["title","description"]),e.createVNode(F,{client:t.client,questions:(m=i.value)==null?void 0:m.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(C,{key:0,client:t.client,placeholder:d.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)])]}),_:1},8,["theme"]))}}),[["__scopeId","data-v-7e33975d"]]);a.DialogInput=C,a.DialogProductBlock=Y,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.1.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.3.0"
|
|
33
33
|
},
|
|
34
34
|
"author": "Dialog",
|
|
35
35
|
"publishConfig": {
|