@blumessage/react-chat 1.0.0 → 1.0.3
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/README.md +231 -124
- package/dist/BlumessageChat.js +624 -0
- package/dist/index.js +1 -2291
- package/dist/types/BlumessageChat.d.ts +48 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +53 -40
- package/dist/components/ChatComponent.d.ts +0 -61
- package/dist/components/ChatComponent.d.ts.map +0 -1
- package/dist/index.esm.js +0 -2289
- package/dist/index.esm.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/lib/index.d.ts +0 -2
- package/dist/lib/index.d.ts.map +0 -1
package/dist/index.esm.js
DELETED
|
@@ -1,2289 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef, createElement, useState, useEffect, useRef } from 'react';
|
|
3
|
-
|
|
4
|
-
/******************************************************************************
|
|
5
|
-
Copyright (c) Microsoft Corporation.
|
|
6
|
-
|
|
7
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
8
|
-
purpose with or without fee is hereby granted.
|
|
9
|
-
|
|
10
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
11
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
12
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
13
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
14
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
15
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
16
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
17
|
-
***************************************************************************** */
|
|
18
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
22
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
23
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
24
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
25
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
26
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
27
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
32
|
-
var e = new Error(message);
|
|
33
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* @license lucide-react v0.462.0 - ISC
|
|
38
|
-
*
|
|
39
|
-
* This source code is licensed under the ISC license.
|
|
40
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
41
|
-
*/
|
|
42
|
-
|
|
43
|
-
const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
|
|
44
|
-
const mergeClasses = (...classes) => classes.filter((className, index, array) => {
|
|
45
|
-
return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
|
|
46
|
-
}).join(" ").trim();
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* @license lucide-react v0.462.0 - ISC
|
|
50
|
-
*
|
|
51
|
-
* This source code is licensed under the ISC license.
|
|
52
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
53
|
-
*/
|
|
54
|
-
|
|
55
|
-
var defaultAttributes = {
|
|
56
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
57
|
-
width: 24,
|
|
58
|
-
height: 24,
|
|
59
|
-
viewBox: "0 0 24 24",
|
|
60
|
-
fill: "none",
|
|
61
|
-
stroke: "currentColor",
|
|
62
|
-
strokeWidth: 2,
|
|
63
|
-
strokeLinecap: "round",
|
|
64
|
-
strokeLinejoin: "round"
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* @license lucide-react v0.462.0 - ISC
|
|
69
|
-
*
|
|
70
|
-
* This source code is licensed under the ISC license.
|
|
71
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
72
|
-
*/
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
const Icon$1 = forwardRef(
|
|
76
|
-
({
|
|
77
|
-
color = "currentColor",
|
|
78
|
-
size = 24,
|
|
79
|
-
strokeWidth = 2,
|
|
80
|
-
absoluteStrokeWidth,
|
|
81
|
-
className = "",
|
|
82
|
-
children,
|
|
83
|
-
iconNode,
|
|
84
|
-
...rest
|
|
85
|
-
}, ref) => {
|
|
86
|
-
return createElement(
|
|
87
|
-
"svg",
|
|
88
|
-
{
|
|
89
|
-
ref,
|
|
90
|
-
...defaultAttributes,
|
|
91
|
-
width: size,
|
|
92
|
-
height: size,
|
|
93
|
-
stroke: color,
|
|
94
|
-
strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
|
|
95
|
-
className: mergeClasses("lucide", className),
|
|
96
|
-
...rest
|
|
97
|
-
},
|
|
98
|
-
[
|
|
99
|
-
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
|
|
100
|
-
...Array.isArray(children) ? children : [children]
|
|
101
|
-
]
|
|
102
|
-
);
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* @license lucide-react v0.462.0 - ISC
|
|
108
|
-
*
|
|
109
|
-
* This source code is licensed under the ISC license.
|
|
110
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
111
|
-
*/
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const createLucideIcon = (iconName, iconNode) => {
|
|
115
|
-
const Component = forwardRef(
|
|
116
|
-
({ className, ...props }, ref) => createElement(Icon$1, {
|
|
117
|
-
ref,
|
|
118
|
-
iconNode,
|
|
119
|
-
className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
|
|
120
|
-
...props
|
|
121
|
-
})
|
|
122
|
-
);
|
|
123
|
-
Component.displayName = `${iconName}`;
|
|
124
|
-
return Component;
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* @license lucide-react v0.462.0 - ISC
|
|
129
|
-
*
|
|
130
|
-
* This source code is licensed under the ISC license.
|
|
131
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
132
|
-
*/
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
const Maximize = createLucideIcon("Maximize", [
|
|
136
|
-
["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
|
|
137
|
-
["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
|
|
138
|
-
["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
|
|
139
|
-
["path", { d: "M16 21h3a2 2 0 0 0 2-2v-3", key: "18trek" }]
|
|
140
|
-
]);
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* @license lucide-react v0.462.0 - ISC
|
|
144
|
-
*
|
|
145
|
-
* This source code is licensed under the ISC license.
|
|
146
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
147
|
-
*/
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
const Minimize = createLucideIcon("Minimize", [
|
|
151
|
-
["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
|
|
152
|
-
["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
|
|
153
|
-
["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
|
|
154
|
-
["path", { d: "M16 21v-3a2 2 0 0 1 2-2h3", key: "ph8mxp" }]
|
|
155
|
-
]);
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
* @license lucide-react v0.462.0 - ISC
|
|
159
|
-
*
|
|
160
|
-
* This source code is licensed under the ISC license.
|
|
161
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
162
|
-
*/
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
const X = createLucideIcon("X", [
|
|
166
|
-
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
167
|
-
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
168
|
-
]);
|
|
169
|
-
|
|
170
|
-
const defaultIconDimensions = Object.freeze(
|
|
171
|
-
{
|
|
172
|
-
left: 0,
|
|
173
|
-
top: 0,
|
|
174
|
-
width: 16,
|
|
175
|
-
height: 16
|
|
176
|
-
}
|
|
177
|
-
);
|
|
178
|
-
const defaultIconTransformations = Object.freeze({
|
|
179
|
-
rotate: 0,
|
|
180
|
-
vFlip: false,
|
|
181
|
-
hFlip: false
|
|
182
|
-
});
|
|
183
|
-
const defaultIconProps = Object.freeze({
|
|
184
|
-
...defaultIconDimensions,
|
|
185
|
-
...defaultIconTransformations
|
|
186
|
-
});
|
|
187
|
-
const defaultExtendedIconProps = Object.freeze({
|
|
188
|
-
...defaultIconProps,
|
|
189
|
-
body: "",
|
|
190
|
-
hidden: false
|
|
191
|
-
});
|
|
192
|
-
|
|
193
|
-
function mergeIconTransformations(obj1, obj2) {
|
|
194
|
-
const result = {};
|
|
195
|
-
if (!obj1.hFlip !== !obj2.hFlip) {
|
|
196
|
-
result.hFlip = true;
|
|
197
|
-
}
|
|
198
|
-
if (!obj1.vFlip !== !obj2.vFlip) {
|
|
199
|
-
result.vFlip = true;
|
|
200
|
-
}
|
|
201
|
-
const rotate = ((obj1.rotate || 0) + (obj2.rotate || 0)) % 4;
|
|
202
|
-
if (rotate) {
|
|
203
|
-
result.rotate = rotate;
|
|
204
|
-
}
|
|
205
|
-
return result;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
function mergeIconData(parent, child) {
|
|
209
|
-
const result = mergeIconTransformations(parent, child);
|
|
210
|
-
for (const key in defaultExtendedIconProps) {
|
|
211
|
-
if (key in defaultIconTransformations) {
|
|
212
|
-
if (key in parent && !(key in result)) {
|
|
213
|
-
result[key] = defaultIconTransformations[key];
|
|
214
|
-
}
|
|
215
|
-
} else if (key in child) {
|
|
216
|
-
result[key] = child[key];
|
|
217
|
-
} else if (key in parent) {
|
|
218
|
-
result[key] = parent[key];
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
return result;
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
function getIconsTree(data, names) {
|
|
225
|
-
const icons = data.icons;
|
|
226
|
-
const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
|
|
227
|
-
const resolved = /* @__PURE__ */ Object.create(null);
|
|
228
|
-
function resolve(name) {
|
|
229
|
-
if (icons[name]) {
|
|
230
|
-
return resolved[name] = [];
|
|
231
|
-
}
|
|
232
|
-
if (!(name in resolved)) {
|
|
233
|
-
resolved[name] = null;
|
|
234
|
-
const parent = aliases[name] && aliases[name].parent;
|
|
235
|
-
const value = parent && resolve(parent);
|
|
236
|
-
if (value) {
|
|
237
|
-
resolved[name] = [parent].concat(value);
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
return resolved[name];
|
|
241
|
-
}
|
|
242
|
-
(Object.keys(icons).concat(Object.keys(aliases))).forEach(resolve);
|
|
243
|
-
return resolved;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
function internalGetIconData(data, name, tree) {
|
|
247
|
-
const icons = data.icons;
|
|
248
|
-
const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
|
|
249
|
-
let currentProps = {};
|
|
250
|
-
function parse(name2) {
|
|
251
|
-
currentProps = mergeIconData(
|
|
252
|
-
icons[name2] || aliases[name2],
|
|
253
|
-
currentProps
|
|
254
|
-
);
|
|
255
|
-
}
|
|
256
|
-
parse(name);
|
|
257
|
-
tree.forEach(parse);
|
|
258
|
-
return mergeIconData(data, currentProps);
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
function parseIconSet(data, callback) {
|
|
262
|
-
const names = [];
|
|
263
|
-
if (typeof data !== "object" || typeof data.icons !== "object") {
|
|
264
|
-
return names;
|
|
265
|
-
}
|
|
266
|
-
if (data.not_found instanceof Array) {
|
|
267
|
-
data.not_found.forEach((name) => {
|
|
268
|
-
callback(name, null);
|
|
269
|
-
names.push(name);
|
|
270
|
-
});
|
|
271
|
-
}
|
|
272
|
-
const tree = getIconsTree(data);
|
|
273
|
-
for (const name in tree) {
|
|
274
|
-
const item = tree[name];
|
|
275
|
-
if (item) {
|
|
276
|
-
callback(name, internalGetIconData(data, name, item));
|
|
277
|
-
names.push(name);
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
return names;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
const optionalPropertyDefaults = {
|
|
284
|
-
provider: "",
|
|
285
|
-
aliases: {},
|
|
286
|
-
not_found: {},
|
|
287
|
-
...defaultIconDimensions
|
|
288
|
-
};
|
|
289
|
-
function checkOptionalProps(item, defaults) {
|
|
290
|
-
for (const prop in defaults) {
|
|
291
|
-
if (prop in item && typeof item[prop] !== typeof defaults[prop]) {
|
|
292
|
-
return false;
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
return true;
|
|
296
|
-
}
|
|
297
|
-
function quicklyValidateIconSet(obj) {
|
|
298
|
-
if (typeof obj !== "object" || obj === null) {
|
|
299
|
-
return null;
|
|
300
|
-
}
|
|
301
|
-
const data = obj;
|
|
302
|
-
if (typeof data.prefix !== "string" || !obj.icons || typeof obj.icons !== "object") {
|
|
303
|
-
return null;
|
|
304
|
-
}
|
|
305
|
-
if (!checkOptionalProps(obj, optionalPropertyDefaults)) {
|
|
306
|
-
return null;
|
|
307
|
-
}
|
|
308
|
-
const icons = data.icons;
|
|
309
|
-
for (const name in icons) {
|
|
310
|
-
const icon = icons[name];
|
|
311
|
-
if (
|
|
312
|
-
// Name cannot be empty
|
|
313
|
-
!name || // Must have body
|
|
314
|
-
typeof icon.body !== "string" || // Check other props
|
|
315
|
-
!checkOptionalProps(
|
|
316
|
-
icon,
|
|
317
|
-
defaultExtendedIconProps
|
|
318
|
-
)
|
|
319
|
-
) {
|
|
320
|
-
return null;
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
|
|
324
|
-
for (const name in aliases) {
|
|
325
|
-
const icon = aliases[name];
|
|
326
|
-
const parent = icon.parent;
|
|
327
|
-
if (
|
|
328
|
-
// Name cannot be empty
|
|
329
|
-
!name || // Parent must be set and point to existing icon
|
|
330
|
-
typeof parent !== "string" || !icons[parent] && !aliases[parent] || // Check other props
|
|
331
|
-
!checkOptionalProps(
|
|
332
|
-
icon,
|
|
333
|
-
defaultExtendedIconProps
|
|
334
|
-
)
|
|
335
|
-
) {
|
|
336
|
-
return null;
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
return data;
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
const matchIconName = /^[a-z0-9]+(-[a-z0-9]+)*$/;
|
|
343
|
-
const stringToIcon = (value, validate, allowSimpleName, provider = "") => {
|
|
344
|
-
const colonSeparated = value.split(":");
|
|
345
|
-
if (value.slice(0, 1) === "@") {
|
|
346
|
-
if (colonSeparated.length < 2 || colonSeparated.length > 3) {
|
|
347
|
-
return null;
|
|
348
|
-
}
|
|
349
|
-
provider = colonSeparated.shift().slice(1);
|
|
350
|
-
}
|
|
351
|
-
if (colonSeparated.length > 3 || !colonSeparated.length) {
|
|
352
|
-
return null;
|
|
353
|
-
}
|
|
354
|
-
if (colonSeparated.length > 1) {
|
|
355
|
-
const name2 = colonSeparated.pop();
|
|
356
|
-
const prefix = colonSeparated.pop();
|
|
357
|
-
const result = {
|
|
358
|
-
// Allow provider without '@': "provider:prefix:name"
|
|
359
|
-
provider: colonSeparated.length > 0 ? colonSeparated[0] : provider,
|
|
360
|
-
prefix,
|
|
361
|
-
name: name2
|
|
362
|
-
};
|
|
363
|
-
return validate && !validateIconName(result) ? null : result;
|
|
364
|
-
}
|
|
365
|
-
const name = colonSeparated[0];
|
|
366
|
-
const dashSeparated = name.split("-");
|
|
367
|
-
if (dashSeparated.length > 1) {
|
|
368
|
-
const result = {
|
|
369
|
-
provider,
|
|
370
|
-
prefix: dashSeparated.shift(),
|
|
371
|
-
name: dashSeparated.join("-")
|
|
372
|
-
};
|
|
373
|
-
return validate && !validateIconName(result) ? null : result;
|
|
374
|
-
}
|
|
375
|
-
if (allowSimpleName && provider === "") {
|
|
376
|
-
const result = {
|
|
377
|
-
provider,
|
|
378
|
-
prefix: "",
|
|
379
|
-
name
|
|
380
|
-
};
|
|
381
|
-
return validate && !validateIconName(result, allowSimpleName) ? null : result;
|
|
382
|
-
}
|
|
383
|
-
return null;
|
|
384
|
-
};
|
|
385
|
-
const validateIconName = (icon, allowSimpleName) => {
|
|
386
|
-
if (!icon) {
|
|
387
|
-
return false;
|
|
388
|
-
}
|
|
389
|
-
return !!// Check prefix: cannot be empty, unless allowSimpleName is enabled
|
|
390
|
-
// Check name: cannot be empty
|
|
391
|
-
((allowSimpleName && icon.prefix === "" || !!icon.prefix) && !!icon.name);
|
|
392
|
-
};
|
|
393
|
-
|
|
394
|
-
const dataStorage = /* @__PURE__ */ Object.create(null);
|
|
395
|
-
function newStorage(provider, prefix) {
|
|
396
|
-
return {
|
|
397
|
-
provider,
|
|
398
|
-
prefix,
|
|
399
|
-
icons: /* @__PURE__ */ Object.create(null),
|
|
400
|
-
missing: /* @__PURE__ */ new Set()
|
|
401
|
-
};
|
|
402
|
-
}
|
|
403
|
-
function getStorage(provider, prefix) {
|
|
404
|
-
const providerStorage = dataStorage[provider] || (dataStorage[provider] = /* @__PURE__ */ Object.create(null));
|
|
405
|
-
return providerStorage[prefix] || (providerStorage[prefix] = newStorage(provider, prefix));
|
|
406
|
-
}
|
|
407
|
-
function addIconSet(storage, data) {
|
|
408
|
-
if (!quicklyValidateIconSet(data)) {
|
|
409
|
-
return [];
|
|
410
|
-
}
|
|
411
|
-
return parseIconSet(data, (name, icon) => {
|
|
412
|
-
if (icon) {
|
|
413
|
-
storage.icons[name] = icon;
|
|
414
|
-
} else {
|
|
415
|
-
storage.missing.add(name);
|
|
416
|
-
}
|
|
417
|
-
});
|
|
418
|
-
}
|
|
419
|
-
function addIconToStorage(storage, name, icon) {
|
|
420
|
-
try {
|
|
421
|
-
if (typeof icon.body === "string") {
|
|
422
|
-
storage.icons[name] = { ...icon };
|
|
423
|
-
return true;
|
|
424
|
-
}
|
|
425
|
-
} catch (err) {
|
|
426
|
-
}
|
|
427
|
-
return false;
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
let simpleNames = false;
|
|
431
|
-
function allowSimpleNames(allow) {
|
|
432
|
-
if (typeof allow === "boolean") {
|
|
433
|
-
simpleNames = allow;
|
|
434
|
-
}
|
|
435
|
-
return simpleNames;
|
|
436
|
-
}
|
|
437
|
-
function getIconData(name) {
|
|
438
|
-
const icon = typeof name === "string" ? stringToIcon(name, true, simpleNames) : name;
|
|
439
|
-
if (icon) {
|
|
440
|
-
const storage = getStorage(icon.provider, icon.prefix);
|
|
441
|
-
const iconName = icon.name;
|
|
442
|
-
return storage.icons[iconName] || (storage.missing.has(iconName) ? null : void 0);
|
|
443
|
-
}
|
|
444
|
-
}
|
|
445
|
-
function addIcon(name, data) {
|
|
446
|
-
const icon = stringToIcon(name, true, simpleNames);
|
|
447
|
-
if (!icon) {
|
|
448
|
-
return false;
|
|
449
|
-
}
|
|
450
|
-
const storage = getStorage(icon.provider, icon.prefix);
|
|
451
|
-
if (data) {
|
|
452
|
-
return addIconToStorage(storage, icon.name, data);
|
|
453
|
-
} else {
|
|
454
|
-
storage.missing.add(icon.name);
|
|
455
|
-
return true;
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
function addCollection(data, provider) {
|
|
459
|
-
if (typeof data !== "object") {
|
|
460
|
-
return false;
|
|
461
|
-
}
|
|
462
|
-
if (typeof provider !== "string") {
|
|
463
|
-
provider = data.provider || "";
|
|
464
|
-
}
|
|
465
|
-
if (simpleNames && !provider && !data.prefix) {
|
|
466
|
-
let added = false;
|
|
467
|
-
if (quicklyValidateIconSet(data)) {
|
|
468
|
-
data.prefix = "";
|
|
469
|
-
parseIconSet(data, (name, icon) => {
|
|
470
|
-
if (addIcon(name, icon)) {
|
|
471
|
-
added = true;
|
|
472
|
-
}
|
|
473
|
-
});
|
|
474
|
-
}
|
|
475
|
-
return added;
|
|
476
|
-
}
|
|
477
|
-
const prefix = data.prefix;
|
|
478
|
-
if (!validateIconName({
|
|
479
|
-
prefix,
|
|
480
|
-
name: "a"
|
|
481
|
-
})) {
|
|
482
|
-
return false;
|
|
483
|
-
}
|
|
484
|
-
const storage = getStorage(provider, prefix);
|
|
485
|
-
return !!addIconSet(storage, data);
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
const defaultIconSizeCustomisations = Object.freeze({
|
|
489
|
-
width: null,
|
|
490
|
-
height: null
|
|
491
|
-
});
|
|
492
|
-
const defaultIconCustomisations = Object.freeze({
|
|
493
|
-
// Dimensions
|
|
494
|
-
...defaultIconSizeCustomisations,
|
|
495
|
-
// Transformations
|
|
496
|
-
...defaultIconTransformations
|
|
497
|
-
});
|
|
498
|
-
|
|
499
|
-
const unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
|
|
500
|
-
const unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
|
|
501
|
-
function calculateSize(size, ratio, precision) {
|
|
502
|
-
if (ratio === 1) {
|
|
503
|
-
return size;
|
|
504
|
-
}
|
|
505
|
-
precision = precision || 100;
|
|
506
|
-
if (typeof size === "number") {
|
|
507
|
-
return Math.ceil(size * ratio * precision) / precision;
|
|
508
|
-
}
|
|
509
|
-
if (typeof size !== "string") {
|
|
510
|
-
return size;
|
|
511
|
-
}
|
|
512
|
-
const oldParts = size.split(unitsSplit);
|
|
513
|
-
if (oldParts === null || !oldParts.length) {
|
|
514
|
-
return size;
|
|
515
|
-
}
|
|
516
|
-
const newParts = [];
|
|
517
|
-
let code = oldParts.shift();
|
|
518
|
-
let isNumber = unitsTest.test(code);
|
|
519
|
-
while (true) {
|
|
520
|
-
if (isNumber) {
|
|
521
|
-
const num = parseFloat(code);
|
|
522
|
-
if (isNaN(num)) {
|
|
523
|
-
newParts.push(code);
|
|
524
|
-
} else {
|
|
525
|
-
newParts.push(Math.ceil(num * ratio * precision) / precision);
|
|
526
|
-
}
|
|
527
|
-
} else {
|
|
528
|
-
newParts.push(code);
|
|
529
|
-
}
|
|
530
|
-
code = oldParts.shift();
|
|
531
|
-
if (code === void 0) {
|
|
532
|
-
return newParts.join("");
|
|
533
|
-
}
|
|
534
|
-
isNumber = !isNumber;
|
|
535
|
-
}
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
function splitSVGDefs(content, tag = "defs") {
|
|
539
|
-
let defs = "";
|
|
540
|
-
const index = content.indexOf("<" + tag);
|
|
541
|
-
while (index >= 0) {
|
|
542
|
-
const start = content.indexOf(">", index);
|
|
543
|
-
const end = content.indexOf("</" + tag);
|
|
544
|
-
if (start === -1 || end === -1) {
|
|
545
|
-
break;
|
|
546
|
-
}
|
|
547
|
-
const endEnd = content.indexOf(">", end);
|
|
548
|
-
if (endEnd === -1) {
|
|
549
|
-
break;
|
|
550
|
-
}
|
|
551
|
-
defs += content.slice(start + 1, end).trim();
|
|
552
|
-
content = content.slice(0, index).trim() + content.slice(endEnd + 1);
|
|
553
|
-
}
|
|
554
|
-
return {
|
|
555
|
-
defs,
|
|
556
|
-
content
|
|
557
|
-
};
|
|
558
|
-
}
|
|
559
|
-
function mergeDefsAndContent(defs, content) {
|
|
560
|
-
return defs ? "<defs>" + defs + "</defs>" + content : content;
|
|
561
|
-
}
|
|
562
|
-
function wrapSVGContent(body, start, end) {
|
|
563
|
-
const split = splitSVGDefs(body);
|
|
564
|
-
return mergeDefsAndContent(split.defs, start + split.content + end);
|
|
565
|
-
}
|
|
566
|
-
|
|
567
|
-
const isUnsetKeyword = (value) => value === "unset" || value === "undefined" || value === "none";
|
|
568
|
-
function iconToSVG(icon, customisations) {
|
|
569
|
-
const fullIcon = {
|
|
570
|
-
...defaultIconProps,
|
|
571
|
-
...icon
|
|
572
|
-
};
|
|
573
|
-
const fullCustomisations = {
|
|
574
|
-
...defaultIconCustomisations,
|
|
575
|
-
...customisations
|
|
576
|
-
};
|
|
577
|
-
const box = {
|
|
578
|
-
left: fullIcon.left,
|
|
579
|
-
top: fullIcon.top,
|
|
580
|
-
width: fullIcon.width,
|
|
581
|
-
height: fullIcon.height
|
|
582
|
-
};
|
|
583
|
-
let body = fullIcon.body;
|
|
584
|
-
[fullIcon, fullCustomisations].forEach((props) => {
|
|
585
|
-
const transformations = [];
|
|
586
|
-
const hFlip = props.hFlip;
|
|
587
|
-
const vFlip = props.vFlip;
|
|
588
|
-
let rotation = props.rotate;
|
|
589
|
-
if (hFlip) {
|
|
590
|
-
if (vFlip) {
|
|
591
|
-
rotation += 2;
|
|
592
|
-
} else {
|
|
593
|
-
transformations.push(
|
|
594
|
-
"translate(" + (box.width + box.left).toString() + " " + (0 - box.top).toString() + ")"
|
|
595
|
-
);
|
|
596
|
-
transformations.push("scale(-1 1)");
|
|
597
|
-
box.top = box.left = 0;
|
|
598
|
-
}
|
|
599
|
-
} else if (vFlip) {
|
|
600
|
-
transformations.push(
|
|
601
|
-
"translate(" + (0 - box.left).toString() + " " + (box.height + box.top).toString() + ")"
|
|
602
|
-
);
|
|
603
|
-
transformations.push("scale(1 -1)");
|
|
604
|
-
box.top = box.left = 0;
|
|
605
|
-
}
|
|
606
|
-
let tempValue;
|
|
607
|
-
if (rotation < 0) {
|
|
608
|
-
rotation -= Math.floor(rotation / 4) * 4;
|
|
609
|
-
}
|
|
610
|
-
rotation = rotation % 4;
|
|
611
|
-
switch (rotation) {
|
|
612
|
-
case 1:
|
|
613
|
-
tempValue = box.height / 2 + box.top;
|
|
614
|
-
transformations.unshift(
|
|
615
|
-
"rotate(90 " + tempValue.toString() + " " + tempValue.toString() + ")"
|
|
616
|
-
);
|
|
617
|
-
break;
|
|
618
|
-
case 2:
|
|
619
|
-
transformations.unshift(
|
|
620
|
-
"rotate(180 " + (box.width / 2 + box.left).toString() + " " + (box.height / 2 + box.top).toString() + ")"
|
|
621
|
-
);
|
|
622
|
-
break;
|
|
623
|
-
case 3:
|
|
624
|
-
tempValue = box.width / 2 + box.left;
|
|
625
|
-
transformations.unshift(
|
|
626
|
-
"rotate(-90 " + tempValue.toString() + " " + tempValue.toString() + ")"
|
|
627
|
-
);
|
|
628
|
-
break;
|
|
629
|
-
}
|
|
630
|
-
if (rotation % 2 === 1) {
|
|
631
|
-
if (box.left !== box.top) {
|
|
632
|
-
tempValue = box.left;
|
|
633
|
-
box.left = box.top;
|
|
634
|
-
box.top = tempValue;
|
|
635
|
-
}
|
|
636
|
-
if (box.width !== box.height) {
|
|
637
|
-
tempValue = box.width;
|
|
638
|
-
box.width = box.height;
|
|
639
|
-
box.height = tempValue;
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
if (transformations.length) {
|
|
643
|
-
body = wrapSVGContent(
|
|
644
|
-
body,
|
|
645
|
-
'<g transform="' + transformations.join(" ") + '">',
|
|
646
|
-
"</g>"
|
|
647
|
-
);
|
|
648
|
-
}
|
|
649
|
-
});
|
|
650
|
-
const customisationsWidth = fullCustomisations.width;
|
|
651
|
-
const customisationsHeight = fullCustomisations.height;
|
|
652
|
-
const boxWidth = box.width;
|
|
653
|
-
const boxHeight = box.height;
|
|
654
|
-
let width;
|
|
655
|
-
let height;
|
|
656
|
-
if (customisationsWidth === null) {
|
|
657
|
-
height = customisationsHeight === null ? "1em" : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
|
|
658
|
-
width = calculateSize(height, boxWidth / boxHeight);
|
|
659
|
-
} else {
|
|
660
|
-
width = customisationsWidth === "auto" ? boxWidth : customisationsWidth;
|
|
661
|
-
height = customisationsHeight === null ? calculateSize(width, boxHeight / boxWidth) : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
|
|
662
|
-
}
|
|
663
|
-
const attributes = {};
|
|
664
|
-
const setAttr = (prop, value) => {
|
|
665
|
-
if (!isUnsetKeyword(value)) {
|
|
666
|
-
attributes[prop] = value.toString();
|
|
667
|
-
}
|
|
668
|
-
};
|
|
669
|
-
setAttr("width", width);
|
|
670
|
-
setAttr("height", height);
|
|
671
|
-
const viewBox = [box.left, box.top, boxWidth, boxHeight];
|
|
672
|
-
attributes.viewBox = viewBox.join(" ");
|
|
673
|
-
return {
|
|
674
|
-
attributes,
|
|
675
|
-
viewBox,
|
|
676
|
-
body
|
|
677
|
-
};
|
|
678
|
-
}
|
|
679
|
-
|
|
680
|
-
const regex = /\sid="(\S+)"/g;
|
|
681
|
-
const randomPrefix = "IconifyId" + Date.now().toString(16) + (Math.random() * 16777216 | 0).toString(16);
|
|
682
|
-
let counter = 0;
|
|
683
|
-
function replaceIDs(body, prefix = randomPrefix) {
|
|
684
|
-
const ids = [];
|
|
685
|
-
let match;
|
|
686
|
-
while (match = regex.exec(body)) {
|
|
687
|
-
ids.push(match[1]);
|
|
688
|
-
}
|
|
689
|
-
if (!ids.length) {
|
|
690
|
-
return body;
|
|
691
|
-
}
|
|
692
|
-
const suffix = "suffix" + (Math.random() * 16777216 | Date.now()).toString(16);
|
|
693
|
-
ids.forEach((id) => {
|
|
694
|
-
const newID = typeof prefix === "function" ? prefix(id) : prefix + (counter++).toString();
|
|
695
|
-
const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
696
|
-
body = body.replace(
|
|
697
|
-
// Allowed characters before id: [#;"]
|
|
698
|
-
// Allowed characters after id: [)"], .[a-z]
|
|
699
|
-
new RegExp('([#;"])(' + escapedID + ')([")]|\\.[a-z])', "g"),
|
|
700
|
-
"$1" + newID + suffix + "$3"
|
|
701
|
-
);
|
|
702
|
-
});
|
|
703
|
-
body = body.replace(new RegExp(suffix, "g"), "");
|
|
704
|
-
return body;
|
|
705
|
-
}
|
|
706
|
-
|
|
707
|
-
const storage = /* @__PURE__ */ Object.create(null);
|
|
708
|
-
function setAPIModule(provider, item) {
|
|
709
|
-
storage[provider] = item;
|
|
710
|
-
}
|
|
711
|
-
function getAPIModule(provider) {
|
|
712
|
-
return storage[provider] || storage[""];
|
|
713
|
-
}
|
|
714
|
-
|
|
715
|
-
function createAPIConfig(source) {
|
|
716
|
-
let resources;
|
|
717
|
-
if (typeof source.resources === "string") {
|
|
718
|
-
resources = [source.resources];
|
|
719
|
-
} else {
|
|
720
|
-
resources = source.resources;
|
|
721
|
-
if (!(resources instanceof Array) || !resources.length) {
|
|
722
|
-
return null;
|
|
723
|
-
}
|
|
724
|
-
}
|
|
725
|
-
const result = {
|
|
726
|
-
// API hosts
|
|
727
|
-
resources,
|
|
728
|
-
// Root path
|
|
729
|
-
path: source.path || "/",
|
|
730
|
-
// URL length limit
|
|
731
|
-
maxURL: source.maxURL || 500,
|
|
732
|
-
// Timeout before next host is used.
|
|
733
|
-
rotate: source.rotate || 750,
|
|
734
|
-
// Timeout before failing query.
|
|
735
|
-
timeout: source.timeout || 5e3,
|
|
736
|
-
// Randomise default API end point.
|
|
737
|
-
random: source.random === true,
|
|
738
|
-
// Start index
|
|
739
|
-
index: source.index || 0,
|
|
740
|
-
// Receive data after time out (used if time out kicks in first, then API module sends data anyway).
|
|
741
|
-
dataAfterTimeout: source.dataAfterTimeout !== false
|
|
742
|
-
};
|
|
743
|
-
return result;
|
|
744
|
-
}
|
|
745
|
-
const configStorage = /* @__PURE__ */ Object.create(null);
|
|
746
|
-
const fallBackAPISources = [
|
|
747
|
-
"https://api.simplesvg.com",
|
|
748
|
-
"https://api.unisvg.com"
|
|
749
|
-
];
|
|
750
|
-
const fallBackAPI = [];
|
|
751
|
-
while (fallBackAPISources.length > 0) {
|
|
752
|
-
if (fallBackAPISources.length === 1) {
|
|
753
|
-
fallBackAPI.push(fallBackAPISources.shift());
|
|
754
|
-
} else {
|
|
755
|
-
if (Math.random() > 0.5) {
|
|
756
|
-
fallBackAPI.push(fallBackAPISources.shift());
|
|
757
|
-
} else {
|
|
758
|
-
fallBackAPI.push(fallBackAPISources.pop());
|
|
759
|
-
}
|
|
760
|
-
}
|
|
761
|
-
}
|
|
762
|
-
configStorage[""] = createAPIConfig({
|
|
763
|
-
resources: ["https://api.iconify.design"].concat(fallBackAPI)
|
|
764
|
-
});
|
|
765
|
-
function addAPIProvider(provider, customConfig) {
|
|
766
|
-
const config = createAPIConfig(customConfig);
|
|
767
|
-
if (config === null) {
|
|
768
|
-
return false;
|
|
769
|
-
}
|
|
770
|
-
configStorage[provider] = config;
|
|
771
|
-
return true;
|
|
772
|
-
}
|
|
773
|
-
function getAPIConfig(provider) {
|
|
774
|
-
return configStorage[provider];
|
|
775
|
-
}
|
|
776
|
-
|
|
777
|
-
const detectFetch = () => {
|
|
778
|
-
let callback;
|
|
779
|
-
try {
|
|
780
|
-
callback = fetch;
|
|
781
|
-
if (typeof callback === "function") {
|
|
782
|
-
return callback;
|
|
783
|
-
}
|
|
784
|
-
} catch (err) {
|
|
785
|
-
}
|
|
786
|
-
};
|
|
787
|
-
let fetchModule = detectFetch();
|
|
788
|
-
function calculateMaxLength(provider, prefix) {
|
|
789
|
-
const config = getAPIConfig(provider);
|
|
790
|
-
if (!config) {
|
|
791
|
-
return 0;
|
|
792
|
-
}
|
|
793
|
-
let result;
|
|
794
|
-
if (!config.maxURL) {
|
|
795
|
-
result = 0;
|
|
796
|
-
} else {
|
|
797
|
-
let maxHostLength = 0;
|
|
798
|
-
config.resources.forEach((item) => {
|
|
799
|
-
const host = item;
|
|
800
|
-
maxHostLength = Math.max(maxHostLength, host.length);
|
|
801
|
-
});
|
|
802
|
-
const url = prefix + ".json?icons=";
|
|
803
|
-
result = config.maxURL - maxHostLength - config.path.length - url.length;
|
|
804
|
-
}
|
|
805
|
-
return result;
|
|
806
|
-
}
|
|
807
|
-
function shouldAbort(status) {
|
|
808
|
-
return status === 404;
|
|
809
|
-
}
|
|
810
|
-
const prepare = (provider, prefix, icons) => {
|
|
811
|
-
const results = [];
|
|
812
|
-
const maxLength = calculateMaxLength(provider, prefix);
|
|
813
|
-
const type = "icons";
|
|
814
|
-
let item = {
|
|
815
|
-
type,
|
|
816
|
-
provider,
|
|
817
|
-
prefix,
|
|
818
|
-
icons: []
|
|
819
|
-
};
|
|
820
|
-
let length = 0;
|
|
821
|
-
icons.forEach((name, index) => {
|
|
822
|
-
length += name.length + 1;
|
|
823
|
-
if (length >= maxLength && index > 0) {
|
|
824
|
-
results.push(item);
|
|
825
|
-
item = {
|
|
826
|
-
type,
|
|
827
|
-
provider,
|
|
828
|
-
prefix,
|
|
829
|
-
icons: []
|
|
830
|
-
};
|
|
831
|
-
length = name.length;
|
|
832
|
-
}
|
|
833
|
-
item.icons.push(name);
|
|
834
|
-
});
|
|
835
|
-
results.push(item);
|
|
836
|
-
return results;
|
|
837
|
-
};
|
|
838
|
-
function getPath(provider) {
|
|
839
|
-
if (typeof provider === "string") {
|
|
840
|
-
const config = getAPIConfig(provider);
|
|
841
|
-
if (config) {
|
|
842
|
-
return config.path;
|
|
843
|
-
}
|
|
844
|
-
}
|
|
845
|
-
return "/";
|
|
846
|
-
}
|
|
847
|
-
const send = (host, params, callback) => {
|
|
848
|
-
if (!fetchModule) {
|
|
849
|
-
callback("abort", 424);
|
|
850
|
-
return;
|
|
851
|
-
}
|
|
852
|
-
let path = getPath(params.provider);
|
|
853
|
-
switch (params.type) {
|
|
854
|
-
case "icons": {
|
|
855
|
-
const prefix = params.prefix;
|
|
856
|
-
const icons = params.icons;
|
|
857
|
-
const iconsList = icons.join(",");
|
|
858
|
-
const urlParams = new URLSearchParams({
|
|
859
|
-
icons: iconsList
|
|
860
|
-
});
|
|
861
|
-
path += prefix + ".json?" + urlParams.toString();
|
|
862
|
-
break;
|
|
863
|
-
}
|
|
864
|
-
case "custom": {
|
|
865
|
-
const uri = params.uri;
|
|
866
|
-
path += uri.slice(0, 1) === "/" ? uri.slice(1) : uri;
|
|
867
|
-
break;
|
|
868
|
-
}
|
|
869
|
-
default:
|
|
870
|
-
callback("abort", 400);
|
|
871
|
-
return;
|
|
872
|
-
}
|
|
873
|
-
let defaultError = 503;
|
|
874
|
-
fetchModule(host + path).then((response) => {
|
|
875
|
-
const status = response.status;
|
|
876
|
-
if (status !== 200) {
|
|
877
|
-
setTimeout(() => {
|
|
878
|
-
callback(shouldAbort(status) ? "abort" : "next", status);
|
|
879
|
-
});
|
|
880
|
-
return;
|
|
881
|
-
}
|
|
882
|
-
defaultError = 501;
|
|
883
|
-
return response.json();
|
|
884
|
-
}).then((data) => {
|
|
885
|
-
if (typeof data !== "object" || data === null) {
|
|
886
|
-
setTimeout(() => {
|
|
887
|
-
if (data === 404) {
|
|
888
|
-
callback("abort", data);
|
|
889
|
-
} else {
|
|
890
|
-
callback("next", defaultError);
|
|
891
|
-
}
|
|
892
|
-
});
|
|
893
|
-
return;
|
|
894
|
-
}
|
|
895
|
-
setTimeout(() => {
|
|
896
|
-
callback("success", data);
|
|
897
|
-
});
|
|
898
|
-
}).catch(() => {
|
|
899
|
-
callback("next", defaultError);
|
|
900
|
-
});
|
|
901
|
-
};
|
|
902
|
-
const fetchAPIModule = {
|
|
903
|
-
prepare,
|
|
904
|
-
send
|
|
905
|
-
};
|
|
906
|
-
|
|
907
|
-
function sortIcons(icons) {
|
|
908
|
-
const result = {
|
|
909
|
-
loaded: [],
|
|
910
|
-
missing: [],
|
|
911
|
-
pending: []
|
|
912
|
-
};
|
|
913
|
-
const storage = /* @__PURE__ */ Object.create(null);
|
|
914
|
-
icons.sort((a, b) => {
|
|
915
|
-
if (a.provider !== b.provider) {
|
|
916
|
-
return a.provider.localeCompare(b.provider);
|
|
917
|
-
}
|
|
918
|
-
if (a.prefix !== b.prefix) {
|
|
919
|
-
return a.prefix.localeCompare(b.prefix);
|
|
920
|
-
}
|
|
921
|
-
return a.name.localeCompare(b.name);
|
|
922
|
-
});
|
|
923
|
-
let lastIcon = {
|
|
924
|
-
provider: "",
|
|
925
|
-
prefix: "",
|
|
926
|
-
name: ""
|
|
927
|
-
};
|
|
928
|
-
icons.forEach((icon) => {
|
|
929
|
-
if (lastIcon.name === icon.name && lastIcon.prefix === icon.prefix && lastIcon.provider === icon.provider) {
|
|
930
|
-
return;
|
|
931
|
-
}
|
|
932
|
-
lastIcon = icon;
|
|
933
|
-
const provider = icon.provider;
|
|
934
|
-
const prefix = icon.prefix;
|
|
935
|
-
const name = icon.name;
|
|
936
|
-
const providerStorage = storage[provider] || (storage[provider] = /* @__PURE__ */ Object.create(null));
|
|
937
|
-
const localStorage = providerStorage[prefix] || (providerStorage[prefix] = getStorage(provider, prefix));
|
|
938
|
-
let list;
|
|
939
|
-
if (name in localStorage.icons) {
|
|
940
|
-
list = result.loaded;
|
|
941
|
-
} else if (prefix === "" || localStorage.missing.has(name)) {
|
|
942
|
-
list = result.missing;
|
|
943
|
-
} else {
|
|
944
|
-
list = result.pending;
|
|
945
|
-
}
|
|
946
|
-
const item = {
|
|
947
|
-
provider,
|
|
948
|
-
prefix,
|
|
949
|
-
name
|
|
950
|
-
};
|
|
951
|
-
list.push(item);
|
|
952
|
-
});
|
|
953
|
-
return result;
|
|
954
|
-
}
|
|
955
|
-
|
|
956
|
-
function removeCallback(storages, id) {
|
|
957
|
-
storages.forEach((storage) => {
|
|
958
|
-
const items = storage.loaderCallbacks;
|
|
959
|
-
if (items) {
|
|
960
|
-
storage.loaderCallbacks = items.filter((row) => row.id !== id);
|
|
961
|
-
}
|
|
962
|
-
});
|
|
963
|
-
}
|
|
964
|
-
function updateCallbacks(storage) {
|
|
965
|
-
if (!storage.pendingCallbacksFlag) {
|
|
966
|
-
storage.pendingCallbacksFlag = true;
|
|
967
|
-
setTimeout(() => {
|
|
968
|
-
storage.pendingCallbacksFlag = false;
|
|
969
|
-
const items = storage.loaderCallbacks ? storage.loaderCallbacks.slice(0) : [];
|
|
970
|
-
if (!items.length) {
|
|
971
|
-
return;
|
|
972
|
-
}
|
|
973
|
-
let hasPending = false;
|
|
974
|
-
const provider = storage.provider;
|
|
975
|
-
const prefix = storage.prefix;
|
|
976
|
-
items.forEach((item) => {
|
|
977
|
-
const icons = item.icons;
|
|
978
|
-
const oldLength = icons.pending.length;
|
|
979
|
-
icons.pending = icons.pending.filter((icon) => {
|
|
980
|
-
if (icon.prefix !== prefix) {
|
|
981
|
-
return true;
|
|
982
|
-
}
|
|
983
|
-
const name = icon.name;
|
|
984
|
-
if (storage.icons[name]) {
|
|
985
|
-
icons.loaded.push({
|
|
986
|
-
provider,
|
|
987
|
-
prefix,
|
|
988
|
-
name
|
|
989
|
-
});
|
|
990
|
-
} else if (storage.missing.has(name)) {
|
|
991
|
-
icons.missing.push({
|
|
992
|
-
provider,
|
|
993
|
-
prefix,
|
|
994
|
-
name
|
|
995
|
-
});
|
|
996
|
-
} else {
|
|
997
|
-
hasPending = true;
|
|
998
|
-
return true;
|
|
999
|
-
}
|
|
1000
|
-
return false;
|
|
1001
|
-
});
|
|
1002
|
-
if (icons.pending.length !== oldLength) {
|
|
1003
|
-
if (!hasPending) {
|
|
1004
|
-
removeCallback([storage], item.id);
|
|
1005
|
-
}
|
|
1006
|
-
item.callback(
|
|
1007
|
-
icons.loaded.slice(0),
|
|
1008
|
-
icons.missing.slice(0),
|
|
1009
|
-
icons.pending.slice(0),
|
|
1010
|
-
item.abort
|
|
1011
|
-
);
|
|
1012
|
-
}
|
|
1013
|
-
});
|
|
1014
|
-
});
|
|
1015
|
-
}
|
|
1016
|
-
}
|
|
1017
|
-
let idCounter = 0;
|
|
1018
|
-
function storeCallback(callback, icons, pendingSources) {
|
|
1019
|
-
const id = idCounter++;
|
|
1020
|
-
const abort = removeCallback.bind(null, pendingSources, id);
|
|
1021
|
-
if (!icons.pending.length) {
|
|
1022
|
-
return abort;
|
|
1023
|
-
}
|
|
1024
|
-
const item = {
|
|
1025
|
-
id,
|
|
1026
|
-
icons,
|
|
1027
|
-
callback,
|
|
1028
|
-
abort
|
|
1029
|
-
};
|
|
1030
|
-
pendingSources.forEach((storage) => {
|
|
1031
|
-
(storage.loaderCallbacks || (storage.loaderCallbacks = [])).push(item);
|
|
1032
|
-
});
|
|
1033
|
-
return abort;
|
|
1034
|
-
}
|
|
1035
|
-
|
|
1036
|
-
function listToIcons(list, validate = true, simpleNames = false) {
|
|
1037
|
-
const result = [];
|
|
1038
|
-
list.forEach((item) => {
|
|
1039
|
-
const icon = typeof item === "string" ? stringToIcon(item, validate, simpleNames) : item;
|
|
1040
|
-
if (icon) {
|
|
1041
|
-
result.push(icon);
|
|
1042
|
-
}
|
|
1043
|
-
});
|
|
1044
|
-
return result;
|
|
1045
|
-
}
|
|
1046
|
-
|
|
1047
|
-
// src/config.ts
|
|
1048
|
-
var defaultConfig = {
|
|
1049
|
-
resources: [],
|
|
1050
|
-
index: 0,
|
|
1051
|
-
timeout: 2e3,
|
|
1052
|
-
rotate: 750,
|
|
1053
|
-
random: false,
|
|
1054
|
-
dataAfterTimeout: false
|
|
1055
|
-
};
|
|
1056
|
-
|
|
1057
|
-
// src/query.ts
|
|
1058
|
-
function sendQuery(config, payload, query, done) {
|
|
1059
|
-
const resourcesCount = config.resources.length;
|
|
1060
|
-
const startIndex = config.random ? Math.floor(Math.random() * resourcesCount) : config.index;
|
|
1061
|
-
let resources;
|
|
1062
|
-
if (config.random) {
|
|
1063
|
-
let list = config.resources.slice(0);
|
|
1064
|
-
resources = [];
|
|
1065
|
-
while (list.length > 1) {
|
|
1066
|
-
const nextIndex = Math.floor(Math.random() * list.length);
|
|
1067
|
-
resources.push(list[nextIndex]);
|
|
1068
|
-
list = list.slice(0, nextIndex).concat(list.slice(nextIndex + 1));
|
|
1069
|
-
}
|
|
1070
|
-
resources = resources.concat(list);
|
|
1071
|
-
} else {
|
|
1072
|
-
resources = config.resources.slice(startIndex).concat(config.resources.slice(0, startIndex));
|
|
1073
|
-
}
|
|
1074
|
-
const startTime = Date.now();
|
|
1075
|
-
let status = "pending";
|
|
1076
|
-
let queriesSent = 0;
|
|
1077
|
-
let lastError;
|
|
1078
|
-
let timer = null;
|
|
1079
|
-
let queue = [];
|
|
1080
|
-
let doneCallbacks = [];
|
|
1081
|
-
if (typeof done === "function") {
|
|
1082
|
-
doneCallbacks.push(done);
|
|
1083
|
-
}
|
|
1084
|
-
function resetTimer() {
|
|
1085
|
-
if (timer) {
|
|
1086
|
-
clearTimeout(timer);
|
|
1087
|
-
timer = null;
|
|
1088
|
-
}
|
|
1089
|
-
}
|
|
1090
|
-
function abort() {
|
|
1091
|
-
if (status === "pending") {
|
|
1092
|
-
status = "aborted";
|
|
1093
|
-
}
|
|
1094
|
-
resetTimer();
|
|
1095
|
-
queue.forEach((item) => {
|
|
1096
|
-
if (item.status === "pending") {
|
|
1097
|
-
item.status = "aborted";
|
|
1098
|
-
}
|
|
1099
|
-
});
|
|
1100
|
-
queue = [];
|
|
1101
|
-
}
|
|
1102
|
-
function subscribe(callback, overwrite) {
|
|
1103
|
-
if (overwrite) {
|
|
1104
|
-
doneCallbacks = [];
|
|
1105
|
-
}
|
|
1106
|
-
if (typeof callback === "function") {
|
|
1107
|
-
doneCallbacks.push(callback);
|
|
1108
|
-
}
|
|
1109
|
-
}
|
|
1110
|
-
function getQueryStatus() {
|
|
1111
|
-
return {
|
|
1112
|
-
startTime,
|
|
1113
|
-
payload,
|
|
1114
|
-
status,
|
|
1115
|
-
queriesSent,
|
|
1116
|
-
queriesPending: queue.length,
|
|
1117
|
-
subscribe,
|
|
1118
|
-
abort
|
|
1119
|
-
};
|
|
1120
|
-
}
|
|
1121
|
-
function failQuery() {
|
|
1122
|
-
status = "failed";
|
|
1123
|
-
doneCallbacks.forEach((callback) => {
|
|
1124
|
-
callback(void 0, lastError);
|
|
1125
|
-
});
|
|
1126
|
-
}
|
|
1127
|
-
function clearQueue() {
|
|
1128
|
-
queue.forEach((item) => {
|
|
1129
|
-
if (item.status === "pending") {
|
|
1130
|
-
item.status = "aborted";
|
|
1131
|
-
}
|
|
1132
|
-
});
|
|
1133
|
-
queue = [];
|
|
1134
|
-
}
|
|
1135
|
-
function moduleResponse(item, response, data) {
|
|
1136
|
-
const isError = response !== "success";
|
|
1137
|
-
queue = queue.filter((queued) => queued !== item);
|
|
1138
|
-
switch (status) {
|
|
1139
|
-
case "pending":
|
|
1140
|
-
break;
|
|
1141
|
-
case "failed":
|
|
1142
|
-
if (isError || !config.dataAfterTimeout) {
|
|
1143
|
-
return;
|
|
1144
|
-
}
|
|
1145
|
-
break;
|
|
1146
|
-
default:
|
|
1147
|
-
return;
|
|
1148
|
-
}
|
|
1149
|
-
if (response === "abort") {
|
|
1150
|
-
lastError = data;
|
|
1151
|
-
failQuery();
|
|
1152
|
-
return;
|
|
1153
|
-
}
|
|
1154
|
-
if (isError) {
|
|
1155
|
-
lastError = data;
|
|
1156
|
-
if (!queue.length) {
|
|
1157
|
-
if (!resources.length) {
|
|
1158
|
-
failQuery();
|
|
1159
|
-
} else {
|
|
1160
|
-
execNext();
|
|
1161
|
-
}
|
|
1162
|
-
}
|
|
1163
|
-
return;
|
|
1164
|
-
}
|
|
1165
|
-
resetTimer();
|
|
1166
|
-
clearQueue();
|
|
1167
|
-
if (!config.random) {
|
|
1168
|
-
const index = config.resources.indexOf(item.resource);
|
|
1169
|
-
if (index !== -1 && index !== config.index) {
|
|
1170
|
-
config.index = index;
|
|
1171
|
-
}
|
|
1172
|
-
}
|
|
1173
|
-
status = "completed";
|
|
1174
|
-
doneCallbacks.forEach((callback) => {
|
|
1175
|
-
callback(data);
|
|
1176
|
-
});
|
|
1177
|
-
}
|
|
1178
|
-
function execNext() {
|
|
1179
|
-
if (status !== "pending") {
|
|
1180
|
-
return;
|
|
1181
|
-
}
|
|
1182
|
-
resetTimer();
|
|
1183
|
-
const resource = resources.shift();
|
|
1184
|
-
if (resource === void 0) {
|
|
1185
|
-
if (queue.length) {
|
|
1186
|
-
timer = setTimeout(() => {
|
|
1187
|
-
resetTimer();
|
|
1188
|
-
if (status === "pending") {
|
|
1189
|
-
clearQueue();
|
|
1190
|
-
failQuery();
|
|
1191
|
-
}
|
|
1192
|
-
}, config.timeout);
|
|
1193
|
-
return;
|
|
1194
|
-
}
|
|
1195
|
-
failQuery();
|
|
1196
|
-
return;
|
|
1197
|
-
}
|
|
1198
|
-
const item = {
|
|
1199
|
-
status: "pending",
|
|
1200
|
-
resource,
|
|
1201
|
-
callback: (status2, data) => {
|
|
1202
|
-
moduleResponse(item, status2, data);
|
|
1203
|
-
}
|
|
1204
|
-
};
|
|
1205
|
-
queue.push(item);
|
|
1206
|
-
queriesSent++;
|
|
1207
|
-
timer = setTimeout(execNext, config.rotate);
|
|
1208
|
-
query(resource, payload, item.callback);
|
|
1209
|
-
}
|
|
1210
|
-
setTimeout(execNext);
|
|
1211
|
-
return getQueryStatus;
|
|
1212
|
-
}
|
|
1213
|
-
|
|
1214
|
-
// src/index.ts
|
|
1215
|
-
function initRedundancy(cfg) {
|
|
1216
|
-
const config = {
|
|
1217
|
-
...defaultConfig,
|
|
1218
|
-
...cfg
|
|
1219
|
-
};
|
|
1220
|
-
let queries = [];
|
|
1221
|
-
function cleanup() {
|
|
1222
|
-
queries = queries.filter((item) => item().status === "pending");
|
|
1223
|
-
}
|
|
1224
|
-
function query(payload, queryCallback, doneCallback) {
|
|
1225
|
-
const query2 = sendQuery(
|
|
1226
|
-
config,
|
|
1227
|
-
payload,
|
|
1228
|
-
queryCallback,
|
|
1229
|
-
(data, error) => {
|
|
1230
|
-
cleanup();
|
|
1231
|
-
if (doneCallback) {
|
|
1232
|
-
doneCallback(data, error);
|
|
1233
|
-
}
|
|
1234
|
-
}
|
|
1235
|
-
);
|
|
1236
|
-
queries.push(query2);
|
|
1237
|
-
return query2;
|
|
1238
|
-
}
|
|
1239
|
-
function find(callback) {
|
|
1240
|
-
return queries.find((value) => {
|
|
1241
|
-
return callback(value);
|
|
1242
|
-
}) || null;
|
|
1243
|
-
}
|
|
1244
|
-
const instance = {
|
|
1245
|
-
query,
|
|
1246
|
-
find,
|
|
1247
|
-
setIndex: (index) => {
|
|
1248
|
-
config.index = index;
|
|
1249
|
-
},
|
|
1250
|
-
getIndex: () => config.index,
|
|
1251
|
-
cleanup
|
|
1252
|
-
};
|
|
1253
|
-
return instance;
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
function emptyCallback$1() {
|
|
1257
|
-
}
|
|
1258
|
-
const redundancyCache = /* @__PURE__ */ Object.create(null);
|
|
1259
|
-
function getRedundancyCache(provider) {
|
|
1260
|
-
if (!redundancyCache[provider]) {
|
|
1261
|
-
const config = getAPIConfig(provider);
|
|
1262
|
-
if (!config) {
|
|
1263
|
-
return;
|
|
1264
|
-
}
|
|
1265
|
-
const redundancy = initRedundancy(config);
|
|
1266
|
-
const cachedReundancy = {
|
|
1267
|
-
config,
|
|
1268
|
-
redundancy
|
|
1269
|
-
};
|
|
1270
|
-
redundancyCache[provider] = cachedReundancy;
|
|
1271
|
-
}
|
|
1272
|
-
return redundancyCache[provider];
|
|
1273
|
-
}
|
|
1274
|
-
function sendAPIQuery(target, query, callback) {
|
|
1275
|
-
let redundancy;
|
|
1276
|
-
let send;
|
|
1277
|
-
if (typeof target === "string") {
|
|
1278
|
-
const api = getAPIModule(target);
|
|
1279
|
-
if (!api) {
|
|
1280
|
-
callback(void 0, 424);
|
|
1281
|
-
return emptyCallback$1;
|
|
1282
|
-
}
|
|
1283
|
-
send = api.send;
|
|
1284
|
-
const cached = getRedundancyCache(target);
|
|
1285
|
-
if (cached) {
|
|
1286
|
-
redundancy = cached.redundancy;
|
|
1287
|
-
}
|
|
1288
|
-
} else {
|
|
1289
|
-
const config = createAPIConfig(target);
|
|
1290
|
-
if (config) {
|
|
1291
|
-
redundancy = initRedundancy(config);
|
|
1292
|
-
const moduleKey = target.resources ? target.resources[0] : "";
|
|
1293
|
-
const api = getAPIModule(moduleKey);
|
|
1294
|
-
if (api) {
|
|
1295
|
-
send = api.send;
|
|
1296
|
-
}
|
|
1297
|
-
}
|
|
1298
|
-
}
|
|
1299
|
-
if (!redundancy || !send) {
|
|
1300
|
-
callback(void 0, 424);
|
|
1301
|
-
return emptyCallback$1;
|
|
1302
|
-
}
|
|
1303
|
-
return redundancy.query(query, send, callback)().abort;
|
|
1304
|
-
}
|
|
1305
|
-
|
|
1306
|
-
function emptyCallback() {
|
|
1307
|
-
}
|
|
1308
|
-
function loadedNewIcons(storage) {
|
|
1309
|
-
if (!storage.iconsLoaderFlag) {
|
|
1310
|
-
storage.iconsLoaderFlag = true;
|
|
1311
|
-
setTimeout(() => {
|
|
1312
|
-
storage.iconsLoaderFlag = false;
|
|
1313
|
-
updateCallbacks(storage);
|
|
1314
|
-
});
|
|
1315
|
-
}
|
|
1316
|
-
}
|
|
1317
|
-
function checkIconNamesForAPI(icons) {
|
|
1318
|
-
const valid = [];
|
|
1319
|
-
const invalid = [];
|
|
1320
|
-
icons.forEach((name) => {
|
|
1321
|
-
(name.match(matchIconName) ? valid : invalid).push(name);
|
|
1322
|
-
});
|
|
1323
|
-
return {
|
|
1324
|
-
valid,
|
|
1325
|
-
invalid
|
|
1326
|
-
};
|
|
1327
|
-
}
|
|
1328
|
-
function parseLoaderResponse(storage, icons, data) {
|
|
1329
|
-
function checkMissing() {
|
|
1330
|
-
const pending = storage.pendingIcons;
|
|
1331
|
-
icons.forEach((name) => {
|
|
1332
|
-
if (pending) {
|
|
1333
|
-
pending.delete(name);
|
|
1334
|
-
}
|
|
1335
|
-
if (!storage.icons[name]) {
|
|
1336
|
-
storage.missing.add(name);
|
|
1337
|
-
}
|
|
1338
|
-
});
|
|
1339
|
-
}
|
|
1340
|
-
if (data && typeof data === "object") {
|
|
1341
|
-
try {
|
|
1342
|
-
const parsed = addIconSet(storage, data);
|
|
1343
|
-
if (!parsed.length) {
|
|
1344
|
-
checkMissing();
|
|
1345
|
-
return;
|
|
1346
|
-
}
|
|
1347
|
-
} catch (err) {
|
|
1348
|
-
console.error(err);
|
|
1349
|
-
}
|
|
1350
|
-
}
|
|
1351
|
-
checkMissing();
|
|
1352
|
-
loadedNewIcons(storage);
|
|
1353
|
-
}
|
|
1354
|
-
function parsePossiblyAsyncResponse(response, callback) {
|
|
1355
|
-
if (response instanceof Promise) {
|
|
1356
|
-
response.then((data) => {
|
|
1357
|
-
callback(data);
|
|
1358
|
-
}).catch(() => {
|
|
1359
|
-
callback(null);
|
|
1360
|
-
});
|
|
1361
|
-
} else {
|
|
1362
|
-
callback(response);
|
|
1363
|
-
}
|
|
1364
|
-
}
|
|
1365
|
-
function loadNewIcons(storage, icons) {
|
|
1366
|
-
if (!storage.iconsToLoad) {
|
|
1367
|
-
storage.iconsToLoad = icons;
|
|
1368
|
-
} else {
|
|
1369
|
-
storage.iconsToLoad = storage.iconsToLoad.concat(icons).sort();
|
|
1370
|
-
}
|
|
1371
|
-
if (!storage.iconsQueueFlag) {
|
|
1372
|
-
storage.iconsQueueFlag = true;
|
|
1373
|
-
setTimeout(() => {
|
|
1374
|
-
storage.iconsQueueFlag = false;
|
|
1375
|
-
const { provider, prefix } = storage;
|
|
1376
|
-
const icons2 = storage.iconsToLoad;
|
|
1377
|
-
delete storage.iconsToLoad;
|
|
1378
|
-
if (!icons2 || !icons2.length) {
|
|
1379
|
-
return;
|
|
1380
|
-
}
|
|
1381
|
-
const customIconLoader = storage.loadIcon;
|
|
1382
|
-
if (storage.loadIcons && (icons2.length > 1 || !customIconLoader)) {
|
|
1383
|
-
parsePossiblyAsyncResponse(
|
|
1384
|
-
storage.loadIcons(icons2, prefix, provider),
|
|
1385
|
-
(data) => {
|
|
1386
|
-
parseLoaderResponse(storage, icons2, data);
|
|
1387
|
-
}
|
|
1388
|
-
);
|
|
1389
|
-
return;
|
|
1390
|
-
}
|
|
1391
|
-
if (customIconLoader) {
|
|
1392
|
-
icons2.forEach((name) => {
|
|
1393
|
-
const response = customIconLoader(name, prefix, provider);
|
|
1394
|
-
parsePossiblyAsyncResponse(response, (data) => {
|
|
1395
|
-
const iconSet = data ? {
|
|
1396
|
-
prefix,
|
|
1397
|
-
icons: {
|
|
1398
|
-
[name]: data
|
|
1399
|
-
}
|
|
1400
|
-
} : null;
|
|
1401
|
-
parseLoaderResponse(storage, [name], iconSet);
|
|
1402
|
-
});
|
|
1403
|
-
});
|
|
1404
|
-
return;
|
|
1405
|
-
}
|
|
1406
|
-
const { valid, invalid } = checkIconNamesForAPI(icons2);
|
|
1407
|
-
if (invalid.length) {
|
|
1408
|
-
parseLoaderResponse(storage, invalid, null);
|
|
1409
|
-
}
|
|
1410
|
-
if (!valid.length) {
|
|
1411
|
-
return;
|
|
1412
|
-
}
|
|
1413
|
-
const api = prefix.match(matchIconName) ? getAPIModule(provider) : null;
|
|
1414
|
-
if (!api) {
|
|
1415
|
-
parseLoaderResponse(storage, valid, null);
|
|
1416
|
-
return;
|
|
1417
|
-
}
|
|
1418
|
-
const params = api.prepare(provider, prefix, valid);
|
|
1419
|
-
params.forEach((item) => {
|
|
1420
|
-
sendAPIQuery(provider, item, (data) => {
|
|
1421
|
-
parseLoaderResponse(storage, item.icons, data);
|
|
1422
|
-
});
|
|
1423
|
-
});
|
|
1424
|
-
});
|
|
1425
|
-
}
|
|
1426
|
-
}
|
|
1427
|
-
const loadIcons = (icons, callback) => {
|
|
1428
|
-
const cleanedIcons = listToIcons(icons, true, allowSimpleNames());
|
|
1429
|
-
const sortedIcons = sortIcons(cleanedIcons);
|
|
1430
|
-
if (!sortedIcons.pending.length) {
|
|
1431
|
-
let callCallback = true;
|
|
1432
|
-
if (callback) {
|
|
1433
|
-
setTimeout(() => {
|
|
1434
|
-
if (callCallback) {
|
|
1435
|
-
callback(
|
|
1436
|
-
sortedIcons.loaded,
|
|
1437
|
-
sortedIcons.missing,
|
|
1438
|
-
sortedIcons.pending,
|
|
1439
|
-
emptyCallback
|
|
1440
|
-
);
|
|
1441
|
-
}
|
|
1442
|
-
});
|
|
1443
|
-
}
|
|
1444
|
-
return () => {
|
|
1445
|
-
callCallback = false;
|
|
1446
|
-
};
|
|
1447
|
-
}
|
|
1448
|
-
const newIcons = /* @__PURE__ */ Object.create(null);
|
|
1449
|
-
const sources = [];
|
|
1450
|
-
let lastProvider, lastPrefix;
|
|
1451
|
-
sortedIcons.pending.forEach((icon) => {
|
|
1452
|
-
const { provider, prefix } = icon;
|
|
1453
|
-
if (prefix === lastPrefix && provider === lastProvider) {
|
|
1454
|
-
return;
|
|
1455
|
-
}
|
|
1456
|
-
lastProvider = provider;
|
|
1457
|
-
lastPrefix = prefix;
|
|
1458
|
-
sources.push(getStorage(provider, prefix));
|
|
1459
|
-
const providerNewIcons = newIcons[provider] || (newIcons[provider] = /* @__PURE__ */ Object.create(null));
|
|
1460
|
-
if (!providerNewIcons[prefix]) {
|
|
1461
|
-
providerNewIcons[prefix] = [];
|
|
1462
|
-
}
|
|
1463
|
-
});
|
|
1464
|
-
sortedIcons.pending.forEach((icon) => {
|
|
1465
|
-
const { provider, prefix, name } = icon;
|
|
1466
|
-
const storage = getStorage(provider, prefix);
|
|
1467
|
-
const pendingQueue = storage.pendingIcons || (storage.pendingIcons = /* @__PURE__ */ new Set());
|
|
1468
|
-
if (!pendingQueue.has(name)) {
|
|
1469
|
-
pendingQueue.add(name);
|
|
1470
|
-
newIcons[provider][prefix].push(name);
|
|
1471
|
-
}
|
|
1472
|
-
});
|
|
1473
|
-
sources.forEach((storage) => {
|
|
1474
|
-
const list = newIcons[storage.provider][storage.prefix];
|
|
1475
|
-
if (list.length) {
|
|
1476
|
-
loadNewIcons(storage, list);
|
|
1477
|
-
}
|
|
1478
|
-
});
|
|
1479
|
-
return callback ? storeCallback(callback, sortedIcons, sources) : emptyCallback;
|
|
1480
|
-
};
|
|
1481
|
-
|
|
1482
|
-
function mergeCustomisations(defaults, item) {
|
|
1483
|
-
const result = {
|
|
1484
|
-
...defaults
|
|
1485
|
-
};
|
|
1486
|
-
for (const key in item) {
|
|
1487
|
-
const value = item[key];
|
|
1488
|
-
const valueType = typeof value;
|
|
1489
|
-
if (key in defaultIconSizeCustomisations) {
|
|
1490
|
-
if (value === null || value && (valueType === "string" || valueType === "number")) {
|
|
1491
|
-
result[key] = value;
|
|
1492
|
-
}
|
|
1493
|
-
} else if (valueType === typeof result[key]) {
|
|
1494
|
-
result[key] = key === "rotate" ? value % 4 : value;
|
|
1495
|
-
}
|
|
1496
|
-
}
|
|
1497
|
-
return result;
|
|
1498
|
-
}
|
|
1499
|
-
|
|
1500
|
-
const separator = /[\s,]+/;
|
|
1501
|
-
function flipFromString(custom, flip) {
|
|
1502
|
-
flip.split(separator).forEach((str) => {
|
|
1503
|
-
const value = str.trim();
|
|
1504
|
-
switch (value) {
|
|
1505
|
-
case "horizontal":
|
|
1506
|
-
custom.hFlip = true;
|
|
1507
|
-
break;
|
|
1508
|
-
case "vertical":
|
|
1509
|
-
custom.vFlip = true;
|
|
1510
|
-
break;
|
|
1511
|
-
}
|
|
1512
|
-
});
|
|
1513
|
-
}
|
|
1514
|
-
|
|
1515
|
-
function rotateFromString(value, defaultValue = 0) {
|
|
1516
|
-
const units = value.replace(/^-?[0-9.]*/, "");
|
|
1517
|
-
function cleanup(value2) {
|
|
1518
|
-
while (value2 < 0) {
|
|
1519
|
-
value2 += 4;
|
|
1520
|
-
}
|
|
1521
|
-
return value2 % 4;
|
|
1522
|
-
}
|
|
1523
|
-
if (units === "") {
|
|
1524
|
-
const num = parseInt(value);
|
|
1525
|
-
return isNaN(num) ? 0 : cleanup(num);
|
|
1526
|
-
} else if (units !== value) {
|
|
1527
|
-
let split = 0;
|
|
1528
|
-
switch (units) {
|
|
1529
|
-
case "%":
|
|
1530
|
-
split = 25;
|
|
1531
|
-
break;
|
|
1532
|
-
case "deg":
|
|
1533
|
-
split = 90;
|
|
1534
|
-
}
|
|
1535
|
-
if (split) {
|
|
1536
|
-
let num = parseFloat(value.slice(0, value.length - units.length));
|
|
1537
|
-
if (isNaN(num)) {
|
|
1538
|
-
return 0;
|
|
1539
|
-
}
|
|
1540
|
-
num = num / split;
|
|
1541
|
-
return num % 1 === 0 ? cleanup(num) : 0;
|
|
1542
|
-
}
|
|
1543
|
-
}
|
|
1544
|
-
return defaultValue;
|
|
1545
|
-
}
|
|
1546
|
-
|
|
1547
|
-
function iconToHTML(body, attributes) {
|
|
1548
|
-
let renderAttribsHTML = body.indexOf("xlink:") === -1 ? "" : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
|
|
1549
|
-
for (const attr in attributes) {
|
|
1550
|
-
renderAttribsHTML += " " + attr + '="' + attributes[attr] + '"';
|
|
1551
|
-
}
|
|
1552
|
-
return '<svg xmlns="http://www.w3.org/2000/svg"' + renderAttribsHTML + ">" + body + "</svg>";
|
|
1553
|
-
}
|
|
1554
|
-
|
|
1555
|
-
function encodeSVGforURL(svg) {
|
|
1556
|
-
return svg.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ");
|
|
1557
|
-
}
|
|
1558
|
-
function svgToData(svg) {
|
|
1559
|
-
return "data:image/svg+xml," + encodeSVGforURL(svg);
|
|
1560
|
-
}
|
|
1561
|
-
function svgToURL(svg) {
|
|
1562
|
-
return 'url("' + svgToData(svg) + '")';
|
|
1563
|
-
}
|
|
1564
|
-
|
|
1565
|
-
let policy;
|
|
1566
|
-
function createPolicy() {
|
|
1567
|
-
try {
|
|
1568
|
-
policy = window.trustedTypes.createPolicy("iconify", {
|
|
1569
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
|
|
1570
|
-
createHTML: (s) => s
|
|
1571
|
-
});
|
|
1572
|
-
} catch (err) {
|
|
1573
|
-
policy = null;
|
|
1574
|
-
}
|
|
1575
|
-
}
|
|
1576
|
-
function cleanUpInnerHTML(html) {
|
|
1577
|
-
if (policy === void 0) {
|
|
1578
|
-
createPolicy();
|
|
1579
|
-
}
|
|
1580
|
-
return policy ? policy.createHTML(html) : html;
|
|
1581
|
-
}
|
|
1582
|
-
|
|
1583
|
-
const defaultExtendedIconCustomisations = {
|
|
1584
|
-
...defaultIconCustomisations,
|
|
1585
|
-
inline: false,
|
|
1586
|
-
};
|
|
1587
|
-
|
|
1588
|
-
/**
|
|
1589
|
-
* Default SVG attributes
|
|
1590
|
-
*/
|
|
1591
|
-
const svgDefaults = {
|
|
1592
|
-
'xmlns': 'http://www.w3.org/2000/svg',
|
|
1593
|
-
'xmlnsXlink': 'http://www.w3.org/1999/xlink',
|
|
1594
|
-
'aria-hidden': true,
|
|
1595
|
-
'role': 'img',
|
|
1596
|
-
};
|
|
1597
|
-
/**
|
|
1598
|
-
* Style modes
|
|
1599
|
-
*/
|
|
1600
|
-
const commonProps = {
|
|
1601
|
-
display: 'inline-block',
|
|
1602
|
-
};
|
|
1603
|
-
const monotoneProps = {
|
|
1604
|
-
backgroundColor: 'currentColor',
|
|
1605
|
-
};
|
|
1606
|
-
const coloredProps = {
|
|
1607
|
-
backgroundColor: 'transparent',
|
|
1608
|
-
};
|
|
1609
|
-
// Dynamically add common props to variables above
|
|
1610
|
-
const propsToAdd = {
|
|
1611
|
-
Image: 'var(--svg)',
|
|
1612
|
-
Repeat: 'no-repeat',
|
|
1613
|
-
Size: '100% 100%',
|
|
1614
|
-
};
|
|
1615
|
-
const propsToAddTo = {
|
|
1616
|
-
WebkitMask: monotoneProps,
|
|
1617
|
-
mask: monotoneProps,
|
|
1618
|
-
background: coloredProps,
|
|
1619
|
-
};
|
|
1620
|
-
for (const prefix in propsToAddTo) {
|
|
1621
|
-
const list = propsToAddTo[prefix];
|
|
1622
|
-
for (const prop in propsToAdd) {
|
|
1623
|
-
list[prefix + prop] = propsToAdd[prop];
|
|
1624
|
-
}
|
|
1625
|
-
}
|
|
1626
|
-
/**
|
|
1627
|
-
* Default values for customisations for inline icon
|
|
1628
|
-
*/
|
|
1629
|
-
const inlineDefaults = {
|
|
1630
|
-
...defaultExtendedIconCustomisations,
|
|
1631
|
-
inline: true,
|
|
1632
|
-
};
|
|
1633
|
-
/**
|
|
1634
|
-
* Fix size: add 'px' to numbers
|
|
1635
|
-
*/
|
|
1636
|
-
function fixSize(value) {
|
|
1637
|
-
return value + (value.match(/^[-0-9.]+$/) ? 'px' : '');
|
|
1638
|
-
}
|
|
1639
|
-
/**
|
|
1640
|
-
* Render icon
|
|
1641
|
-
*/
|
|
1642
|
-
const render = (
|
|
1643
|
-
// Icon must be validated before calling this function
|
|
1644
|
-
icon,
|
|
1645
|
-
// Partial properties
|
|
1646
|
-
props,
|
|
1647
|
-
// Icon name
|
|
1648
|
-
name) => {
|
|
1649
|
-
// Get default properties
|
|
1650
|
-
const defaultProps = props.inline
|
|
1651
|
-
? inlineDefaults
|
|
1652
|
-
: defaultExtendedIconCustomisations;
|
|
1653
|
-
// Get all customisations
|
|
1654
|
-
const customisations = mergeCustomisations(defaultProps, props);
|
|
1655
|
-
// Check mode
|
|
1656
|
-
const mode = props.mode || 'svg';
|
|
1657
|
-
// Create style
|
|
1658
|
-
const style = {};
|
|
1659
|
-
const customStyle = props.style || {};
|
|
1660
|
-
// Create SVG component properties
|
|
1661
|
-
const componentProps = {
|
|
1662
|
-
...(mode === 'svg' ? svgDefaults : {}),
|
|
1663
|
-
};
|
|
1664
|
-
if (name) {
|
|
1665
|
-
const iconName = stringToIcon(name, false, true);
|
|
1666
|
-
if (iconName) {
|
|
1667
|
-
const classNames = ['iconify'];
|
|
1668
|
-
const props = [
|
|
1669
|
-
'provider',
|
|
1670
|
-
'prefix',
|
|
1671
|
-
];
|
|
1672
|
-
for (const prop of props) {
|
|
1673
|
-
if (iconName[prop]) {
|
|
1674
|
-
classNames.push('iconify--' + iconName[prop]);
|
|
1675
|
-
}
|
|
1676
|
-
}
|
|
1677
|
-
componentProps.className = classNames.join(' ');
|
|
1678
|
-
}
|
|
1679
|
-
}
|
|
1680
|
-
// Get element properties
|
|
1681
|
-
for (let key in props) {
|
|
1682
|
-
const value = props[key];
|
|
1683
|
-
if (value === void 0) {
|
|
1684
|
-
continue;
|
|
1685
|
-
}
|
|
1686
|
-
switch (key) {
|
|
1687
|
-
// Properties to ignore
|
|
1688
|
-
case 'icon':
|
|
1689
|
-
case 'style':
|
|
1690
|
-
case 'children':
|
|
1691
|
-
case 'onLoad':
|
|
1692
|
-
case 'mode':
|
|
1693
|
-
case 'ssr':
|
|
1694
|
-
break;
|
|
1695
|
-
// Forward ref
|
|
1696
|
-
case '_ref':
|
|
1697
|
-
componentProps.ref = value;
|
|
1698
|
-
break;
|
|
1699
|
-
// Merge class names
|
|
1700
|
-
case 'className':
|
|
1701
|
-
componentProps[key] =
|
|
1702
|
-
(componentProps[key] ? componentProps[key] + ' ' : '') +
|
|
1703
|
-
value;
|
|
1704
|
-
break;
|
|
1705
|
-
// Boolean attributes
|
|
1706
|
-
case 'inline':
|
|
1707
|
-
case 'hFlip':
|
|
1708
|
-
case 'vFlip':
|
|
1709
|
-
customisations[key] =
|
|
1710
|
-
value === true || value === 'true' || value === 1;
|
|
1711
|
-
break;
|
|
1712
|
-
// Flip as string: 'horizontal,vertical'
|
|
1713
|
-
case 'flip':
|
|
1714
|
-
if (typeof value === 'string') {
|
|
1715
|
-
flipFromString(customisations, value);
|
|
1716
|
-
}
|
|
1717
|
-
break;
|
|
1718
|
-
// Color: copy to style
|
|
1719
|
-
case 'color':
|
|
1720
|
-
style.color = value;
|
|
1721
|
-
break;
|
|
1722
|
-
// Rotation as string
|
|
1723
|
-
case 'rotate':
|
|
1724
|
-
if (typeof value === 'string') {
|
|
1725
|
-
customisations[key] = rotateFromString(value);
|
|
1726
|
-
}
|
|
1727
|
-
else if (typeof value === 'number') {
|
|
1728
|
-
customisations[key] = value;
|
|
1729
|
-
}
|
|
1730
|
-
break;
|
|
1731
|
-
// Remove aria-hidden
|
|
1732
|
-
case 'ariaHidden':
|
|
1733
|
-
case 'aria-hidden':
|
|
1734
|
-
if (value !== true && value !== 'true') {
|
|
1735
|
-
delete componentProps['aria-hidden'];
|
|
1736
|
-
}
|
|
1737
|
-
break;
|
|
1738
|
-
// Copy missing property if it does not exist in customisations
|
|
1739
|
-
default:
|
|
1740
|
-
if (defaultProps[key] === void 0) {
|
|
1741
|
-
componentProps[key] = value;
|
|
1742
|
-
}
|
|
1743
|
-
}
|
|
1744
|
-
}
|
|
1745
|
-
// Generate icon
|
|
1746
|
-
const item = iconToSVG(icon, customisations);
|
|
1747
|
-
const renderAttribs = item.attributes;
|
|
1748
|
-
// Inline display
|
|
1749
|
-
if (customisations.inline) {
|
|
1750
|
-
style.verticalAlign = '-0.125em';
|
|
1751
|
-
}
|
|
1752
|
-
if (mode === 'svg') {
|
|
1753
|
-
// Add style
|
|
1754
|
-
componentProps.style = {
|
|
1755
|
-
...style,
|
|
1756
|
-
...customStyle,
|
|
1757
|
-
};
|
|
1758
|
-
// Add icon stuff
|
|
1759
|
-
Object.assign(componentProps, renderAttribs);
|
|
1760
|
-
// Counter for ids based on "id" property to render icons consistently on server and client
|
|
1761
|
-
let localCounter = 0;
|
|
1762
|
-
let id = props.id;
|
|
1763
|
-
if (typeof id === 'string') {
|
|
1764
|
-
// Convert '-' to '_' to avoid errors in animations
|
|
1765
|
-
id = id.replace(/-/g, '_');
|
|
1766
|
-
}
|
|
1767
|
-
// Add icon stuff
|
|
1768
|
-
componentProps.dangerouslySetInnerHTML = {
|
|
1769
|
-
__html: cleanUpInnerHTML(replaceIDs(item.body, id ? () => id + 'ID' + localCounter++ : 'iconifyReact')),
|
|
1770
|
-
};
|
|
1771
|
-
return createElement('svg', componentProps);
|
|
1772
|
-
}
|
|
1773
|
-
// Render <span> with style
|
|
1774
|
-
const { body, width, height } = icon;
|
|
1775
|
-
const useMask = mode === 'mask' ||
|
|
1776
|
-
(mode === 'bg' ? false : body.indexOf('currentColor') !== -1);
|
|
1777
|
-
// Generate SVG
|
|
1778
|
-
const html = iconToHTML(body, {
|
|
1779
|
-
...renderAttribs,
|
|
1780
|
-
width: width + '',
|
|
1781
|
-
height: height + '',
|
|
1782
|
-
});
|
|
1783
|
-
// Generate style
|
|
1784
|
-
componentProps.style = {
|
|
1785
|
-
...style,
|
|
1786
|
-
'--svg': svgToURL(html),
|
|
1787
|
-
'width': fixSize(renderAttribs.width),
|
|
1788
|
-
'height': fixSize(renderAttribs.height),
|
|
1789
|
-
...commonProps,
|
|
1790
|
-
...(useMask ? monotoneProps : coloredProps),
|
|
1791
|
-
...customStyle,
|
|
1792
|
-
};
|
|
1793
|
-
return createElement('span', componentProps);
|
|
1794
|
-
};
|
|
1795
|
-
|
|
1796
|
-
/**
|
|
1797
|
-
* Initialise stuff
|
|
1798
|
-
*/
|
|
1799
|
-
// Enable short names
|
|
1800
|
-
allowSimpleNames(true);
|
|
1801
|
-
// Set API module
|
|
1802
|
-
setAPIModule('', fetchAPIModule);
|
|
1803
|
-
/**
|
|
1804
|
-
* Browser stuff
|
|
1805
|
-
*/
|
|
1806
|
-
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
|
|
1807
|
-
const _window = window;
|
|
1808
|
-
// Load icons from global "IconifyPreload"
|
|
1809
|
-
if (_window.IconifyPreload !== void 0) {
|
|
1810
|
-
const preload = _window.IconifyPreload;
|
|
1811
|
-
const err = 'Invalid IconifyPreload syntax.';
|
|
1812
|
-
if (typeof preload === 'object' && preload !== null) {
|
|
1813
|
-
(preload instanceof Array ? preload : [preload]).forEach((item) => {
|
|
1814
|
-
try {
|
|
1815
|
-
if (
|
|
1816
|
-
// Check if item is an object and not null/array
|
|
1817
|
-
typeof item !== 'object' ||
|
|
1818
|
-
item === null ||
|
|
1819
|
-
item instanceof Array ||
|
|
1820
|
-
// Check for 'icons' and 'prefix'
|
|
1821
|
-
typeof item.icons !== 'object' ||
|
|
1822
|
-
typeof item.prefix !== 'string' ||
|
|
1823
|
-
// Add icon set
|
|
1824
|
-
!addCollection(item)) {
|
|
1825
|
-
console.error(err);
|
|
1826
|
-
}
|
|
1827
|
-
}
|
|
1828
|
-
catch (e) {
|
|
1829
|
-
console.error(err);
|
|
1830
|
-
}
|
|
1831
|
-
});
|
|
1832
|
-
}
|
|
1833
|
-
}
|
|
1834
|
-
// Set API from global "IconifyProviders"
|
|
1835
|
-
if (_window.IconifyProviders !== void 0) {
|
|
1836
|
-
const providers = _window.IconifyProviders;
|
|
1837
|
-
if (typeof providers === 'object' && providers !== null) {
|
|
1838
|
-
for (let key in providers) {
|
|
1839
|
-
const err = 'IconifyProviders[' + key + '] is invalid.';
|
|
1840
|
-
try {
|
|
1841
|
-
const value = providers[key];
|
|
1842
|
-
if (typeof value !== 'object' ||
|
|
1843
|
-
!value ||
|
|
1844
|
-
value.resources === void 0) {
|
|
1845
|
-
continue;
|
|
1846
|
-
}
|
|
1847
|
-
if (!addAPIProvider(key, value)) {
|
|
1848
|
-
console.error(err);
|
|
1849
|
-
}
|
|
1850
|
-
}
|
|
1851
|
-
catch (e) {
|
|
1852
|
-
console.error(err);
|
|
1853
|
-
}
|
|
1854
|
-
}
|
|
1855
|
-
}
|
|
1856
|
-
}
|
|
1857
|
-
}
|
|
1858
|
-
function IconComponent(props) {
|
|
1859
|
-
const [mounted, setMounted] = useState(!!props.ssr);
|
|
1860
|
-
const [abort, setAbort] = useState({});
|
|
1861
|
-
// Get initial state
|
|
1862
|
-
function getInitialState(mounted) {
|
|
1863
|
-
if (mounted) {
|
|
1864
|
-
const name = props.icon;
|
|
1865
|
-
if (typeof name === 'object') {
|
|
1866
|
-
// Icon as object
|
|
1867
|
-
return {
|
|
1868
|
-
name: '',
|
|
1869
|
-
data: name,
|
|
1870
|
-
};
|
|
1871
|
-
}
|
|
1872
|
-
const data = getIconData(name);
|
|
1873
|
-
if (data) {
|
|
1874
|
-
return {
|
|
1875
|
-
name,
|
|
1876
|
-
data,
|
|
1877
|
-
};
|
|
1878
|
-
}
|
|
1879
|
-
}
|
|
1880
|
-
return {
|
|
1881
|
-
name: '',
|
|
1882
|
-
};
|
|
1883
|
-
}
|
|
1884
|
-
const [state, setState] = useState(getInitialState(!!props.ssr));
|
|
1885
|
-
// Cancel loading
|
|
1886
|
-
function cleanup() {
|
|
1887
|
-
const callback = abort.callback;
|
|
1888
|
-
if (callback) {
|
|
1889
|
-
callback();
|
|
1890
|
-
setAbort({});
|
|
1891
|
-
}
|
|
1892
|
-
}
|
|
1893
|
-
// Change state if it is different
|
|
1894
|
-
function changeState(newState) {
|
|
1895
|
-
if (JSON.stringify(state) !== JSON.stringify(newState)) {
|
|
1896
|
-
cleanup();
|
|
1897
|
-
setState(newState);
|
|
1898
|
-
return true;
|
|
1899
|
-
}
|
|
1900
|
-
}
|
|
1901
|
-
// Update state
|
|
1902
|
-
function updateState() {
|
|
1903
|
-
var _a;
|
|
1904
|
-
const name = props.icon;
|
|
1905
|
-
if (typeof name === 'object') {
|
|
1906
|
-
// Icon as object
|
|
1907
|
-
changeState({
|
|
1908
|
-
name: '',
|
|
1909
|
-
data: name,
|
|
1910
|
-
});
|
|
1911
|
-
return;
|
|
1912
|
-
}
|
|
1913
|
-
// New icon or got icon data
|
|
1914
|
-
const data = getIconData(name);
|
|
1915
|
-
if (changeState({
|
|
1916
|
-
name,
|
|
1917
|
-
data,
|
|
1918
|
-
})) {
|
|
1919
|
-
if (data === undefined) {
|
|
1920
|
-
// Load icon, update state when done
|
|
1921
|
-
const callback = loadIcons([name], updateState);
|
|
1922
|
-
setAbort({
|
|
1923
|
-
callback,
|
|
1924
|
-
});
|
|
1925
|
-
}
|
|
1926
|
-
else if (data) {
|
|
1927
|
-
// Icon data is available: trigger onLoad callback if present
|
|
1928
|
-
(_a = props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props, name);
|
|
1929
|
-
}
|
|
1930
|
-
}
|
|
1931
|
-
}
|
|
1932
|
-
// Mounted state, cleanup for loader
|
|
1933
|
-
useEffect(() => {
|
|
1934
|
-
setMounted(true);
|
|
1935
|
-
return cleanup;
|
|
1936
|
-
}, []);
|
|
1937
|
-
// Icon changed or component mounted
|
|
1938
|
-
useEffect(() => {
|
|
1939
|
-
if (mounted) {
|
|
1940
|
-
updateState();
|
|
1941
|
-
}
|
|
1942
|
-
}, [props.icon, mounted]);
|
|
1943
|
-
// Render icon
|
|
1944
|
-
const { name, data } = state;
|
|
1945
|
-
if (!data) {
|
|
1946
|
-
return props.children
|
|
1947
|
-
? props.children
|
|
1948
|
-
: props.fallback
|
|
1949
|
-
? props.fallback
|
|
1950
|
-
: createElement('span', {});
|
|
1951
|
-
}
|
|
1952
|
-
return render({
|
|
1953
|
-
...defaultIconProps,
|
|
1954
|
-
...data,
|
|
1955
|
-
}, props, name);
|
|
1956
|
-
}
|
|
1957
|
-
/**
|
|
1958
|
-
* Block icon
|
|
1959
|
-
*
|
|
1960
|
-
* @param props - Component properties
|
|
1961
|
-
*/
|
|
1962
|
-
const Icon = forwardRef((props, ref) => IconComponent({
|
|
1963
|
-
...props,
|
|
1964
|
-
_ref: ref,
|
|
1965
|
-
}));
|
|
1966
|
-
/**
|
|
1967
|
-
* Inline icon (has negative verticalAlign that makes it behave like icon font)
|
|
1968
|
-
*
|
|
1969
|
-
* @param props - Component properties
|
|
1970
|
-
*/
|
|
1971
|
-
forwardRef((props, ref) => IconComponent({
|
|
1972
|
-
inline: true,
|
|
1973
|
-
...props,
|
|
1974
|
-
_ref: ref,
|
|
1975
|
-
}));
|
|
1976
|
-
|
|
1977
|
-
const ChatComponent = ({ messages: externalMessages, onSendMessage, currentUser = { id: 'user1', name: 'You' }, inputPlaceholder = 'Type a message...', className = '', headerTitle = 'BlueMessage AI', headerDescription = 'Online • Instant responses', headerColor, headerIcon = 'mdi:message-text', headerIconColor, headerIconHide = false, headerAvatarColor = 'rgba(255, 255, 255, 0.2)', primaryColor = '#3b82f6', secondaryColor = '#2563eb', messageUserColor, messageAssistantColor = '#f3f4f6', messageTimestamps = true, messageUserAvatarVisibility = false, messageUserAvatarIcon = 'mdi:account', messageUserAvatarColor = '#3b82f6', messageAssistantAvatarVisibility = false, messageAssistantAvatarIcon = 'mdi:robot', messageAssistantAvatarColor = '#6b7280', messageUserName = null, messageAssistantName = null, sendButtonIcon = 'mdi:send', sendButtonColor, inputOutlineColor = '#3b82f6', floatingButtonPosition = 'bottom-right', floatingButtonIcon, floatingButtonIconColor, floatingButtonBackgroundColor, size = 'medium', maximizeToggle = true, maximize = false, autoOpen = false, forceOpen = false, apiKey }) => {
|
|
1978
|
-
const [isOpen, setIsOpen] = useState(autoOpen || forceOpen);
|
|
1979
|
-
const [isClosing, setIsClosing] = useState(false);
|
|
1980
|
-
const [isMaximized, setIsMaximized] = useState(maximize);
|
|
1981
|
-
const [isMaximizing, setIsMaximizing] = useState(false);
|
|
1982
|
-
// API key validation state
|
|
1983
|
-
const [isApiKeyValid, setIsApiKeyValid] = useState(false);
|
|
1984
|
-
const [isValidatingApiKey, setIsValidatingApiKey] = useState(false);
|
|
1985
|
-
// Check if API key is missing or invalid
|
|
1986
|
-
const isApiKeyMissing = !apiKey;
|
|
1987
|
-
const isChatDisabled = isApiKeyMissing || (!isApiKeyValid && apiKey !== 'test');
|
|
1988
|
-
// Validate API key
|
|
1989
|
-
useEffect(() => {
|
|
1990
|
-
const validateApiKey = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
1991
|
-
if (!apiKey) {
|
|
1992
|
-
console.error('ChatComponent: API key is missing. Chat functionality has been disabled.');
|
|
1993
|
-
return;
|
|
1994
|
-
}
|
|
1995
|
-
// Special exception for test API key
|
|
1996
|
-
if (apiKey === 'test') {
|
|
1997
|
-
setIsApiKeyValid(true);
|
|
1998
|
-
console.log('ChatComponent: Using test API key for demo purposes.');
|
|
1999
|
-
return;
|
|
2000
|
-
}
|
|
2001
|
-
setIsValidatingApiKey(true);
|
|
2002
|
-
try {
|
|
2003
|
-
const response = yield fetch('https://api.blumessage.com/api/v1/api-keys/validate', {
|
|
2004
|
-
method: 'POST',
|
|
2005
|
-
headers: {
|
|
2006
|
-
'Content-Type': 'application/json',
|
|
2007
|
-
},
|
|
2008
|
-
body: JSON.stringify({ apiKey }),
|
|
2009
|
-
});
|
|
2010
|
-
if (response.status === 200) {
|
|
2011
|
-
setIsApiKeyValid(true);
|
|
2012
|
-
console.log('ChatComponent: API key validated successfully.');
|
|
2013
|
-
}
|
|
2014
|
-
else {
|
|
2015
|
-
setIsApiKeyValid(false);
|
|
2016
|
-
console.error('ChatComponent: API key is invalid. Chat functionality has been disabled.');
|
|
2017
|
-
}
|
|
2018
|
-
}
|
|
2019
|
-
catch (error) {
|
|
2020
|
-
setIsApiKeyValid(false);
|
|
2021
|
-
console.error('ChatComponent: Failed to validate API key. Chat functionality has been disabled.', error);
|
|
2022
|
-
}
|
|
2023
|
-
finally {
|
|
2024
|
-
setIsValidatingApiKey(false);
|
|
2025
|
-
}
|
|
2026
|
-
});
|
|
2027
|
-
validateApiKey();
|
|
2028
|
-
}, [apiKey]);
|
|
2029
|
-
const [messages, setMessages] = useState(externalMessages || [
|
|
2030
|
-
{
|
|
2031
|
-
id: '1',
|
|
2032
|
-
text: 'Hello! Welcome to the chat component demo.',
|
|
2033
|
-
sender: { id: 'bot', name: 'ChatBot', avatar: '🤖' },
|
|
2034
|
-
timestamp: new Date(Date.now() - 5 * 60000),
|
|
2035
|
-
isOwn: false
|
|
2036
|
-
},
|
|
2037
|
-
{
|
|
2038
|
-
id: '2',
|
|
2039
|
-
text: 'This is what a user message looks like!',
|
|
2040
|
-
sender: currentUser,
|
|
2041
|
-
timestamp: new Date(Date.now() - 3 * 60000),
|
|
2042
|
-
isOwn: true
|
|
2043
|
-
},
|
|
2044
|
-
{
|
|
2045
|
-
id: '3',
|
|
2046
|
-
text: 'You can customize the appearance, add your own message handlers, and integrate it with any backend.',
|
|
2047
|
-
sender: { id: 'bot', name: 'ChatBot', avatar: '🤖' },
|
|
2048
|
-
timestamp: new Date(Date.now() - 1 * 60000),
|
|
2049
|
-
isOwn: false
|
|
2050
|
-
}
|
|
2051
|
-
]);
|
|
2052
|
-
const [newMessage, setNewMessage] = useState('');
|
|
2053
|
-
const [isTyping, setIsTyping] = useState(false);
|
|
2054
|
-
const messagesEndRef = useRef(null);
|
|
2055
|
-
const [shouldScrollToBottom, setShouldScrollToBottom] = useState(false);
|
|
2056
|
-
const getSizeClasses = (size) => {
|
|
2057
|
-
switch (size) {
|
|
2058
|
-
case 'xsmall':
|
|
2059
|
-
return 'w-64 h-80';
|
|
2060
|
-
case 'small':
|
|
2061
|
-
return 'w-72 h-96';
|
|
2062
|
-
case 'medium':
|
|
2063
|
-
return 'w-80 sm:w-96 h-[500px] sm:h-[600px]';
|
|
2064
|
-
case 'large':
|
|
2065
|
-
return 'w-96 sm:w-[28rem] h-[600px] sm:h-[700px]';
|
|
2066
|
-
case 'xlarge':
|
|
2067
|
-
return 'w-[28rem] sm:w-[32rem] h-[700px] sm:h-[800px]';
|
|
2068
|
-
default:
|
|
2069
|
-
return 'w-80 sm:w-96 h-[500px] sm:h-[600px]';
|
|
2070
|
-
}
|
|
2071
|
-
};
|
|
2072
|
-
const getPositionClasses = (position) => {
|
|
2073
|
-
switch (position) {
|
|
2074
|
-
case 'top-right':
|
|
2075
|
-
return 'top-4 right-4';
|
|
2076
|
-
case 'top-left':
|
|
2077
|
-
return 'top-4 left-4';
|
|
2078
|
-
case 'bottom-left':
|
|
2079
|
-
return 'bottom-4 left-4';
|
|
2080
|
-
case 'bottom-right':
|
|
2081
|
-
default:
|
|
2082
|
-
return 'bottom-4 right-4';
|
|
2083
|
-
}
|
|
2084
|
-
};
|
|
2085
|
-
const handleOpenChat = () => {
|
|
2086
|
-
if (!forceOpen && !isChatDisabled) {
|
|
2087
|
-
setIsOpen(true);
|
|
2088
|
-
setIsClosing(false);
|
|
2089
|
-
setShouldScrollToBottom(true);
|
|
2090
|
-
if (maximize) {
|
|
2091
|
-
setIsMaximized(true);
|
|
2092
|
-
}
|
|
2093
|
-
}
|
|
2094
|
-
};
|
|
2095
|
-
const handleCloseChat = () => {
|
|
2096
|
-
if (!forceOpen) {
|
|
2097
|
-
setIsClosing(true);
|
|
2098
|
-
setTimeout(() => {
|
|
2099
|
-
setIsOpen(false);
|
|
2100
|
-
setIsClosing(false);
|
|
2101
|
-
}, 300);
|
|
2102
|
-
}
|
|
2103
|
-
};
|
|
2104
|
-
const handleToggleMaximize = () => {
|
|
2105
|
-
setIsMaximizing(true);
|
|
2106
|
-
setTimeout(() => {
|
|
2107
|
-
setIsMaximized(!isMaximized);
|
|
2108
|
-
setTimeout(() => {
|
|
2109
|
-
setIsMaximizing(false);
|
|
2110
|
-
}, 400);
|
|
2111
|
-
}, 50);
|
|
2112
|
-
};
|
|
2113
|
-
const scrollToBottom = () => {
|
|
2114
|
-
var _a;
|
|
2115
|
-
(_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
|
|
2116
|
-
};
|
|
2117
|
-
useEffect(() => {
|
|
2118
|
-
if (shouldScrollToBottom && isOpen) {
|
|
2119
|
-
setTimeout(() => {
|
|
2120
|
-
scrollToBottom();
|
|
2121
|
-
setShouldScrollToBottom(false);
|
|
2122
|
-
}, 100);
|
|
2123
|
-
}
|
|
2124
|
-
}, [shouldScrollToBottom, isOpen]);
|
|
2125
|
-
useEffect(() => {
|
|
2126
|
-
scrollToBottom();
|
|
2127
|
-
}, [messages]);
|
|
2128
|
-
const handleSendMessage = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
2129
|
-
if (newMessage.trim() && !isTyping && !isChatDisabled) {
|
|
2130
|
-
const userMessage = {
|
|
2131
|
-
id: Date.now().toString(),
|
|
2132
|
-
text: newMessage,
|
|
2133
|
-
sender: currentUser,
|
|
2134
|
-
timestamp: new Date(),
|
|
2135
|
-
isOwn: true
|
|
2136
|
-
};
|
|
2137
|
-
setMessages(prev => [...prev, userMessage]);
|
|
2138
|
-
setNewMessage('');
|
|
2139
|
-
setIsTyping(true);
|
|
2140
|
-
if (onSendMessage) {
|
|
2141
|
-
onSendMessage(newMessage);
|
|
2142
|
-
}
|
|
2143
|
-
// If we have a valid API key, send to BlueMessage API
|
|
2144
|
-
if (apiKey && (isApiKeyValid || apiKey === 'test')) {
|
|
2145
|
-
try {
|
|
2146
|
-
const response = yield fetch('https://api.blumessage.com/api/v1/conversations', {
|
|
2147
|
-
method: 'POST',
|
|
2148
|
-
headers: {
|
|
2149
|
-
'Content-Type': 'application/json',
|
|
2150
|
-
'Authorization': `Bearer ${apiKey}`
|
|
2151
|
-
},
|
|
2152
|
-
body: JSON.stringify({
|
|
2153
|
-
message: newMessage
|
|
2154
|
-
}),
|
|
2155
|
-
});
|
|
2156
|
-
if (response.ok) {
|
|
2157
|
-
const data = yield response.json();
|
|
2158
|
-
console.log('BlueMessage API response:', data);
|
|
2159
|
-
// Get the last assistant message from the response
|
|
2160
|
-
const assistantMessages = data.messages.filter((msg) => msg.role === 'assistant');
|
|
2161
|
-
if (assistantMessages.length > 0) {
|
|
2162
|
-
const lastAssistantMessage = assistantMessages[assistantMessages.length - 1];
|
|
2163
|
-
const botResponse = {
|
|
2164
|
-
id: (Date.now() + 1).toString(),
|
|
2165
|
-
text: lastAssistantMessage.content,
|
|
2166
|
-
sender: { id: 'assistant', name: 'Assistant', avatar: '🤖' },
|
|
2167
|
-
timestamp: new Date(lastAssistantMessage.timestamp),
|
|
2168
|
-
isOwn: false
|
|
2169
|
-
};
|
|
2170
|
-
setMessages(prev => [...prev, botResponse]);
|
|
2171
|
-
}
|
|
2172
|
-
}
|
|
2173
|
-
else {
|
|
2174
|
-
console.error('Failed to send message to BlueMessage API:', response.status);
|
|
2175
|
-
// Fallback to demo response
|
|
2176
|
-
const botResponse = {
|
|
2177
|
-
id: (Date.now() + 1).toString(),
|
|
2178
|
-
text: `Thanks for your message: "${newMessage}". This is a fallback response as the API request failed.`,
|
|
2179
|
-
sender: { id: 'bot', name: 'ChatBot', avatar: '🤖' },
|
|
2180
|
-
timestamp: new Date(),
|
|
2181
|
-
isOwn: false
|
|
2182
|
-
};
|
|
2183
|
-
setMessages(prev => [...prev, botResponse]);
|
|
2184
|
-
}
|
|
2185
|
-
}
|
|
2186
|
-
catch (error) {
|
|
2187
|
-
console.error('Error calling BlueMessage API:', error);
|
|
2188
|
-
// Fallback to demo response
|
|
2189
|
-
const botResponse = {
|
|
2190
|
-
id: (Date.now() + 1).toString(),
|
|
2191
|
-
text: `Thanks for your message: "${newMessage}". This is a fallback response due to an API error.`,
|
|
2192
|
-
sender: { id: 'bot', name: 'ChatBot', avatar: '🤖' },
|
|
2193
|
-
timestamp: new Date(),
|
|
2194
|
-
isOwn: false
|
|
2195
|
-
};
|
|
2196
|
-
setMessages(prev => [...prev, botResponse]);
|
|
2197
|
-
}
|
|
2198
|
-
}
|
|
2199
|
-
else {
|
|
2200
|
-
// Fallback demo response when no valid API key
|
|
2201
|
-
setTimeout(() => {
|
|
2202
|
-
const botResponse = {
|
|
2203
|
-
id: (Date.now() + 1).toString(),
|
|
2204
|
-
text: `Thanks for your message: "${newMessage}". This is an automated response for the demo!`,
|
|
2205
|
-
sender: { id: 'bot', name: 'ChatBot', avatar: '🤖' },
|
|
2206
|
-
timestamp: new Date(),
|
|
2207
|
-
isOwn: false
|
|
2208
|
-
};
|
|
2209
|
-
setMessages(prev => [...prev, botResponse]);
|
|
2210
|
-
}, 1500);
|
|
2211
|
-
}
|
|
2212
|
-
setIsTyping(false);
|
|
2213
|
-
}
|
|
2214
|
-
});
|
|
2215
|
-
const handleKeyPress = (e) => {
|
|
2216
|
-
if (e.key === 'Enter' && !e.shiftKey && !isTyping && !isChatDisabled) {
|
|
2217
|
-
e.preventDefault();
|
|
2218
|
-
handleSendMessage();
|
|
2219
|
-
}
|
|
2220
|
-
};
|
|
2221
|
-
const formatTime = (date) => {
|
|
2222
|
-
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
2223
|
-
};
|
|
2224
|
-
const getHeaderBackground = () => {
|
|
2225
|
-
if (headerColor) {
|
|
2226
|
-
return headerColor;
|
|
2227
|
-
}
|
|
2228
|
-
return `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`;
|
|
2229
|
-
};
|
|
2230
|
-
const getUserMessageBackground = () => {
|
|
2231
|
-
if (messageUserColor) {
|
|
2232
|
-
return messageUserColor;
|
|
2233
|
-
}
|
|
2234
|
-
return `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`;
|
|
2235
|
-
};
|
|
2236
|
-
const getSendButtonBackground = () => {
|
|
2237
|
-
if (sendButtonColor) {
|
|
2238
|
-
return sendButtonColor;
|
|
2239
|
-
}
|
|
2240
|
-
return (newMessage.trim() && !isTyping && !isChatDisabled)
|
|
2241
|
-
? `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`
|
|
2242
|
-
: 'linear-gradient(to right, #d1d5db, #9ca3af)';
|
|
2243
|
-
};
|
|
2244
|
-
const getFloatingButtonBackground = () => {
|
|
2245
|
-
if (floatingButtonBackgroundColor) {
|
|
2246
|
-
return floatingButtonBackgroundColor;
|
|
2247
|
-
}
|
|
2248
|
-
return `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`;
|
|
2249
|
-
};
|
|
2250
|
-
const getFloatingButtonIcon = () => {
|
|
2251
|
-
return floatingButtonIcon || headerIcon;
|
|
2252
|
-
};
|
|
2253
|
-
const getFloatingButtonIconColor = () => {
|
|
2254
|
-
return floatingButtonIconColor || 'white';
|
|
2255
|
-
};
|
|
2256
|
-
// Don't render anything if API key is missing or invalid (except for test key)
|
|
2257
|
-
if (isChatDisabled) {
|
|
2258
|
-
return null;
|
|
2259
|
-
}
|
|
2260
|
-
return (jsxs("div", { className: `fixed ${getPositionClasses(floatingButtonPosition)} z-50 ${className}`, children: [!isOpen && !forceOpen && (jsx("button", { onClick: handleOpenChat, disabled: isValidatingApiKey, className: "w-14 h-14 rounded-full text-white shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed", style: {
|
|
2261
|
-
background: getFloatingButtonBackground()
|
|
2262
|
-
}, children: isValidatingApiKey ? (jsx("div", { className: "w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin mx-auto" })) : !headerIconHide ? (jsx(Icon, { icon: getFloatingButtonIcon(), width: 24, height: 24, className: "mx-auto", style: { color: getFloatingButtonIconColor() } })) : (jsx("div", { className: "w-6 h-6 bg-white/20 rounded-full mx-auto" })) })), jsxs("div", { className: `${isMaximized
|
|
2263
|
-
? 'fixed inset-4 w-auto h-auto'
|
|
2264
|
-
: getSizeClasses(size)} bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col origin-bottom-right ${!isOpen
|
|
2265
|
-
? 'opacity-0 pointer-events-none scale-95 translate-y-2'
|
|
2266
|
-
: isClosing
|
|
2267
|
-
? 'animate-out slide-out-to-bottom-2 fade-out-0 scale-out-95 duration-300'
|
|
2268
|
-
: 'animate-in slide-in-from-bottom-2 fade-in-0 scale-in-95 duration-300'} ${isMaximizing
|
|
2269
|
-
? 'transition-all duration-400 ease-in-out transform'
|
|
2270
|
-
: 'transition-all duration-300'}`, children: [jsxs("div", { className: "text-white p-4 flex items-center gap-3 flex-shrink-0", style: {
|
|
2271
|
-
background: getHeaderBackground()
|
|
2272
|
-
}, children: [!headerIconHide && (jsx("div", { className: "w-10 h-10 rounded-full backdrop-blur-sm flex items-center justify-center", style: { backgroundColor: headerAvatarColor }, children: jsx(Icon, { icon: headerIcon, width: 20, height: 20, style: { color: headerIconColor || 'white' } }) })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("h3", { className: "font-semibold text-lg truncate", children: headerTitle }), jsx("p", { className: "text-white/80 text-sm truncate", children: headerDescription })] }), maximizeToggle && (jsx("button", { onClick: handleToggleMaximize, className: "text-white/70 hover:text-white transition-all duration-200 flex-shrink-0 mr-2 hover:scale-110 active:scale-95", title: isMaximized ? 'Minimize' : 'Maximize', children: isMaximized ? jsx(Minimize, { size: 20 }) : jsx(Maximize, { size: 20 }) })), !forceOpen && (jsx("button", { onClick: handleCloseChat, className: "text-white/70 hover:text-white transition-all duration-200 flex-shrink-0 hover:scale-110 active:scale-95", children: jsx(X, { size: 20 }) }))] }), jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-4 min-h-0", children: [messages.map((message) => (jsx("div", { className: `flex ${message.isOwn ? 'justify-end' : 'justify-start'} animate-in slide-in-from-bottom-2 duration-300`, children: jsxs("div", { className: `max-w-[75%] sm:max-w-xs lg:max-w-md flex ${message.isOwn ? 'flex-row-reverse' : 'flex-row'} items-end gap-2`, children: [((message.isOwn && messageUserAvatarVisibility) || (!message.isOwn && messageAssistantAvatarVisibility)) && (jsx("div", { className: "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0", style: {
|
|
2273
|
-
backgroundColor: message.isOwn ? messageUserAvatarColor : messageAssistantAvatarColor
|
|
2274
|
-
}, children: jsx(Icon, { icon: message.isOwn ? messageUserAvatarIcon : messageAssistantAvatarIcon, width: 16, height: 16, className: "text-white" }) })), jsxs("div", { className: "flex flex-col", children: [((message.isOwn && messageUserName) || (!message.isOwn && messageAssistantName)) && (jsx("div", { className: "text-xs text-gray-500 mb-1 px-3", children: message.isOwn ? messageUserName : messageAssistantName })), jsxs("div", { className: `px-4 py-2 rounded-2xl shadow-sm transition-all duration-200 hover:shadow-md break-words ${message.isOwn
|
|
2275
|
-
? 'text-white rounded-br-md'
|
|
2276
|
-
: 'text-gray-800 rounded-bl-md hover:bg-gray-50'}`, style: message.isOwn ? {
|
|
2277
|
-
background: getUserMessageBackground()
|
|
2278
|
-
} : {
|
|
2279
|
-
backgroundColor: messageAssistantColor
|
|
2280
|
-
}, children: [jsx("p", { className: "text-sm leading-relaxed", children: message.text }), messageTimestamps && (jsx("div", { className: `text-xs mt-1 ${message.isOwn ? 'text-white/70' : 'text-gray-500'}`, children: formatTime(message.timestamp) }))] })] })] }) }, message.id))), isTyping && (jsx("div", { className: "flex justify-start animate-in slide-in-from-bottom-2 duration-300", children: jsxs("div", { className: "flex items-end gap-2", children: [messageAssistantAvatarVisibility && (jsx("div", { className: "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0", style: { backgroundColor: messageAssistantAvatarColor }, children: jsx(Icon, { icon: messageAssistantAvatarIcon, width: 16, height: 16, className: "text-white" }) })), jsx("div", { className: "px-4 py-2 rounded-2xl rounded-bl-md", style: { backgroundColor: messageAssistantColor }, children: jsxs("div", { className: "flex space-x-1", children: [jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse" }), jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse", style: { animationDelay: '0.2s' } }), jsx("div", { className: "w-2 h-2 bg-gray-400 rounded-full animate-pulse", style: { animationDelay: '0.4s' } })] }) })] }) })), jsx("div", { ref: messagesEndRef })] }), jsx("div", { className: "border-t border-gray-200 p-4 flex-shrink-0", children: jsxs("div", { className: "flex gap-2 items-end", children: [jsx("textarea", { value: newMessage, onChange: (e) => setNewMessage(e.target.value), onKeyPress: handleKeyPress, placeholder: isTyping ? 'Assistant is responding...' : inputPlaceholder, disabled: isChatDisabled, className: "flex-1 resize-none border border-gray-300 rounded-2xl px-4 py-3 focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 max-h-32 min-h-[48px] text-sm disabled:opacity-50 disabled:cursor-not-allowed", style: {
|
|
2281
|
-
'--tw-ring-color': inputOutlineColor,
|
|
2282
|
-
'--tw-ring-opacity': '1'
|
|
2283
|
-
}, rows: 1 }), jsx("button", { onClick: handleSendMessage, disabled: !newMessage.trim() || isTyping || isChatDisabled, className: "text-white p-3 rounded-2xl transition-all duration-200 transform hover:scale-105 active:scale-95 disabled:scale-100 disabled:cursor-not-allowed shadow-lg hover:shadow-xl flex-shrink-0", style: {
|
|
2284
|
-
background: getSendButtonBackground()
|
|
2285
|
-
}, children: jsx(Icon, { icon: sendButtonIcon, width: 20, height: 20 }) })] }) })] })] }));
|
|
2286
|
-
};
|
|
2287
|
-
|
|
2288
|
-
export { ChatComponent as BlumessageChat };
|
|
2289
|
-
//# sourceMappingURL=index.esm.js.map
|