@inploi/plugin-chatbot 3.28.6 → 3.29.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.
@@ -1,4883 +0,0 @@
1
- import { g as get$1, i as isString$2, k as kbToReadableSize, a as getHeadOrThrow, b as invariant, A as AbortedError, c as getFlowSubmissionsPayload, N, _, d as getDefaultExportFromCjs, h, e as _$1, p, F, o as o$1, f as clsx, y, s as store, j as a$2, l as k, m as k$1, n as getFormSubmitter, q as parse, r as picklist, t as isSubmissionOfType, C as Cn, u as parseAsync, V as ValiError, v as object, w as transform, x as cva, z as maxLength, B as minLength, D as record, E as boolean, G as number, H as minValue, I as maxValue, J as custom, K as string, L as regex, M as email, O as url, P as LoadingIndicator, Q as ERROR_MESSAGES } from "./index-a103d43c.js";
2
- import "@inploi/sdk";
3
- const isConditionMet = ({
4
- condition,
5
- context,
6
- submissions,
7
- ifBlock
8
- }) => {
9
- const [firstSegment, ...path] = condition.compareKey.split(".");
10
- if (!firstSegment)
11
- return false;
12
- const answer = getSubmissionValueToCheck({
13
- context,
14
- key: firstSegment,
15
- path,
16
- submissions
17
- });
18
- if (!answer)
19
- return false;
20
- switch (answer.type) {
21
- case "address": {
22
- const value = get$1(answer.value, path.join("."));
23
- switch (condition.compare) {
24
- case "equals":
25
- return value === condition.compareValue;
26
- case "contains":
27
- if (!value)
28
- return false;
29
- return value.includes(condition.compareValue);
30
- case "notEquals":
31
- return value !== condition.compareValue;
32
- case "notContains":
33
- if (!value)
34
- return true;
35
- return !value.includes(condition.compareValue);
36
- }
37
- break;
38
- }
39
- case "integration": {
40
- if (typeof answer.value !== "object")
41
- return false;
42
- if (Array.isArray(answer.value))
43
- return false;
44
- const value = get$1(answer.value, path.join("."));
45
- const newIfBlock = {
46
- ...ifBlock,
47
- data: {
48
- ...ifBlock.data,
49
- compareKey: "_temp"
50
- }
51
- };
52
- switch (typeof value) {
53
- case "boolean":
54
- return isIfBlockConditionMet(newIfBlock, {
55
- submissions: {
56
- ["_temp"]: {
57
- value,
58
- type: "boolean"
59
- }
60
- },
61
- context
62
- });
63
- case "string":
64
- return isIfBlockConditionMet(newIfBlock, {
65
- submissions: {
66
- ["_temp"]: {
67
- value,
68
- type: "string"
69
- }
70
- },
71
- context
72
- });
73
- case "number":
74
- return isIfBlockConditionMet(newIfBlock, {
75
- submissions: {
76
- ["_temp"]: {
77
- value,
78
- type: "number"
79
- }
80
- },
81
- context
82
- });
83
- case "object":
84
- if (Array.isArray(value) && value.every(isString$2)) {
85
- return isIfBlockConditionMet(newIfBlock, {
86
- submissions: {
87
- ["_temp"]: {
88
- value,
89
- type: "enum"
90
- }
91
- },
92
- context
93
- });
94
- }
95
- return false;
96
- }
97
- break;
98
- }
99
- case "boolean": {
100
- const compareBoolean = condition.compareValue === "true";
101
- switch (condition.compare) {
102
- case "equals":
103
- return answer.value === compareBoolean;
104
- case "notEquals":
105
- return answer.value !== compareBoolean;
106
- }
107
- break;
108
- }
109
- case "string":
110
- switch (condition.compare) {
111
- case "equals":
112
- return answer.value === condition.compareValue;
113
- case "contains":
114
- if (!answer.value)
115
- return false;
116
- return answer.value.includes(condition.compareValue);
117
- case "notEquals":
118
- return answer.value !== condition.compareValue;
119
- case "notContains":
120
- if (!answer.value)
121
- return true;
122
- return !answer.value.includes(condition.compareValue);
123
- }
124
- break;
125
- case "number": {
126
- try {
127
- const compareNumber = Number(condition.compareValue);
128
- switch (condition.compare) {
129
- case "equals":
130
- return answer.value === compareNumber;
131
- case "notEquals":
132
- return answer.value !== compareNumber;
133
- case "greaterThan":
134
- return answer.value > compareNumber;
135
- case "greaterThanOrEqualTo":
136
- return answer.value >= compareNumber;
137
- case "lessThan":
138
- return answer.value < compareNumber;
139
- case "lessThanOrEqualTo":
140
- return answer.value <= compareNumber;
141
- }
142
- } catch {
143
- console.error(`Failed to parse number in if-block ${ifBlock.id}`, answer.value);
144
- return false;
145
- }
146
- break;
147
- }
148
- case "enum":
149
- switch (condition.compare) {
150
- case "equals":
151
- return answer.value.length === 1 && answer.value[0] === condition.compareValue;
152
- case "notEquals":
153
- return answer.value.length === 1 && answer.value[0] !== condition.compareValue;
154
- case "contains":
155
- return answer.value.includes(condition.compareValue);
156
- case "notContains":
157
- return !answer.value.includes(condition.compareValue);
158
- }
159
- break;
160
- }
161
- };
162
- const isIfBlockConditionMet = (ifBlock, {
163
- context,
164
- submissions
165
- }) => {
166
- const conditions = "combinator" in ifBlock.data ? ifBlock.data.conditions : [ifBlock.data];
167
- const combinator = "combinator" in ifBlock.data ? ifBlock.data.combinator : "and";
168
- for (const condition of conditions) {
169
- const isMet = isConditionMet({
170
- condition,
171
- context,
172
- submissions,
173
- ifBlock
174
- });
175
- if (combinator === "or" && isMet)
176
- return true;
177
- if (combinator === "and" && !isMet)
178
- return false;
179
- }
180
- return true;
181
- };
182
- const HANDLEBARS_REGEXP = /{{\s*([^}]+?)\s*(?:\|\s*([^}]+?)\s*)?}}/g;
183
- const interpolateWithData = (str, {
184
- context,
185
- submissions
186
- }) => {
187
- return str.replace(HANDLEBARS_REGEXP, (_2, key, defaultValue = "") => {
188
- const [firstSegment, ...path] = key.trim().split(".");
189
- const entity = getSubmissionValueToCheck({
190
- key: firstSegment,
191
- path,
192
- submissions,
193
- context
194
- });
195
- if (!entity)
196
- return defaultValue;
197
- switch (entity.type) {
198
- case "boolean":
199
- return entity.value === true ? "true" : "false";
200
- case "file":
201
- return entity.value.map((file) => `${file.name} (${kbToReadableSize(file.sizeKb)})`).join(", ");
202
- case "enum":
203
- return entity.value.join(", ");
204
- case "address":
205
- return Object.values(entity.value).filter((line) => line && line.trim().length > 0).join(", ");
206
- case "number":
207
- case "string":
208
- if (!entity.value)
209
- return defaultValue;
210
- return entity.value.toString();
211
- case "integration": {
212
- if (typeof entity.value !== "object")
213
- break;
214
- if (Array.isArray(entity.value))
215
- break;
216
- const value = get$1(entity.value, path.join("."));
217
- switch (typeof value) {
218
- case "boolean":
219
- return value === true ? "true" : "false";
220
- case "string":
221
- return value;
222
- case "number":
223
- return value.toString();
224
- case "object":
225
- if (Array.isArray(value) && value.every(isString$2)) {
226
- return value.join(", ");
227
- }
228
- }
229
- break;
230
- }
231
- }
232
- return defaultValue;
233
- });
234
- };
235
- const followNodes = ({
236
- node,
237
- nodes,
238
- stopWhen
239
- }) => {
240
- if ((stopWhen == null ? void 0 : stopWhen(node)) === true)
241
- return node;
242
- const nextNode = node.nextId ? nodes.find((n2) => n2.id === node.nextId) : void 0;
243
- if (!nextNode)
244
- return;
245
- return followNodes({
246
- node: nextNode,
247
- nodes,
248
- stopWhen
249
- });
250
- };
251
- const fallthroughBranch = ({
252
- childNode,
253
- nodes
254
- }) => {
255
- const branches = nodes.filter((node) => node.type === "if-block");
256
- const branch = branches.find((branchNode) => {
257
- if (!branchNode.branchId)
258
- return false;
259
- const nodeToFollow = nodes.find((n2) => n2.id === branchNode.branchId);
260
- if (!nodeToFollow)
261
- return false;
262
- const node = followNodes({
263
- node: nodeToFollow,
264
- nodes,
265
- stopWhen: (n2) => n2.id === childNode.id
266
- });
267
- if (!node || node.id !== childNode.id)
268
- return false;
269
- return true;
270
- });
271
- if (!(branch == null ? void 0 : branch.nextId))
272
- return;
273
- return nodes.find((n2) => n2.id === branch.nextId);
274
- };
275
- const createFlowInterpreter = ({
276
- flow,
277
- analytics,
278
- logger,
279
- context,
280
- apiClient,
281
- getSubmissions,
282
- chatService,
283
- onFlowEnd,
284
- onInterpret
285
- }) => {
286
- let controller = new AbortController();
287
- const analyticsWithCustomProperties = {
288
- ...analytics.service,
289
- log: (params) => analytics.service.log({
290
- ...params,
291
- customProperties: {
292
- ...params.customProperties,
293
- ...analytics.customProperties
294
- }
295
- })
296
- };
297
- const interpretNode = async (node, prevNode) => {
298
- const submissions = getSubmissions();
299
- onInterpret == null ? void 0 : onInterpret(node, prevNode);
300
- try {
301
- await interpret({
302
- flow,
303
- analytics: analyticsWithCustomProperties,
304
- logger,
305
- apiClient,
306
- context,
307
- node,
308
- submissions,
309
- chat: {
310
- sendMessage: async (message) => chatService.send({
311
- groupId: node.id,
312
- message,
313
- signal: controller.signal
314
- }),
315
- userInput: async (input) => chatService.input({
316
- input,
317
- signal: controller.signal
318
- }),
319
- addToSubmissions: chatService.addToSubmissions
320
- },
321
- next: (nodeId) => {
322
- const nextNode = nodeId ? flow.nodes.find((node2) => node2.id === nodeId) : fallthroughBranch({
323
- childNode: node,
324
- nodes: flow.nodes
325
- });
326
- if (!nextNode)
327
- return onFlowEnd == null ? void 0 : onFlowEnd(node);
328
- return interpretNode(nextNode, node);
329
- },
330
- end: () => onFlowEnd == null ? void 0 : onFlowEnd(node)
331
- });
332
- } catch (e) {
333
- if (e instanceof AbortedError)
334
- return;
335
- throw e;
336
- }
337
- };
338
- return {
339
- interpret: async (startFromNodeId) => {
340
- const startNode = flow.nodes.find((node) => node.id === startFromNodeId) ?? getHeadOrThrow(flow.nodes);
341
- return interpretNode(startNode);
342
- },
343
- undo: (nodeHistory) => {
344
- let removed = 1;
345
- const formerLastNode = flow.nodes.find((n2) => n2.id === nodeHistory[nodeHistory.length - 1]);
346
- for (let i2 = nodeHistory.length - 2; i2 > 0; i2--) {
347
- const nodeId = nodeHistory[i2];
348
- const node = flow.nodes.find((n2) => n2.id === nodeId);
349
- if (!node)
350
- break;
351
- removed++;
352
- if (node.type.startsWith("question-"))
353
- break;
354
- }
355
- controller.abort();
356
- controller = new AbortController();
357
- const newStartNode = flow.nodes.find((node) => node.id === nodeHistory[nodeHistory.length - removed]);
358
- invariant(newStartNode, "Undo failed: new start node not found");
359
- interpretNode(newStartNode, formerLastNode);
360
- return {
361
- removed
362
- };
363
- },
364
- abort: () => {
365
- controller.abort();
366
- }
367
- };
368
- };
369
- async function interpret(params) {
370
- const node = params.node;
371
- switch (node.type) {
372
- case "text":
373
- return interpretTextNode({
374
- ...params,
375
- node
376
- });
377
- case "image":
378
- return interpretImageNode({
379
- ...params,
380
- node
381
- });
382
- case "question-text":
383
- return interpretQuestionTextNode({
384
- ...params,
385
- node
386
- });
387
- case "question-enum":
388
- return interpretQuestionEnumNode({
389
- ...params,
390
- node
391
- });
392
- case "question-number":
393
- return interpretQuestionNumberNode({
394
- ...params,
395
- node
396
- });
397
- case "question-boolean":
398
- return interpretQuestionBooleanNode({
399
- ...params,
400
- node
401
- });
402
- case "question-file":
403
- return interpretQuestionFileNode({
404
- ...params,
405
- node
406
- });
407
- case "question-address":
408
- return interpretQuestionAddressNode({
409
- ...params,
410
- node
411
- });
412
- case "end-flow":
413
- return interpretEndFlowNode({
414
- ...params,
415
- node
416
- });
417
- case "if-block":
418
- return interpretIfBlockNode({
419
- ...params,
420
- node
421
- });
422
- case "jump":
423
- return interpretJumpNode({
424
- ...params,
425
- node
426
- });
427
- case "link":
428
- return interpretLinkNode({
429
- ...params,
430
- node
431
- });
432
- case "integration-application-submit":
433
- return interpretSubmitNode({
434
- ...params,
435
- node
436
- });
437
- case "add-submission":
438
- return interpretAddSubmissionNode({
439
- ...params,
440
- node
441
- });
442
- case "integration-workflow-get":
443
- throw Error("Workflow should be unreachable");
444
- case "identify":
445
- return interpretIdentifyNode({
446
- ...params,
447
- node
448
- });
449
- default:
450
- throw new Error(`Unknown node: ${JSON.stringify(node)}`);
451
- }
452
- }
453
- const getSubmissionValue = (submissions, key) => {
454
- var _a;
455
- const value = (_a = submissions[key]) == null ? void 0 : _a.value;
456
- if (typeof value !== "string" && typeof value !== "number")
457
- throw new Error(`Submission at “${key}” is not a string or number`);
458
- return value;
459
- };
460
- async function interpretIdentifyNode({
461
- next,
462
- node,
463
- analytics,
464
- submissions,
465
- logger
466
- }) {
467
- if (!submissions)
468
- return next(node.nextId);
469
- try {
470
- analytics.log({
471
- event: "IDENTIFY",
472
- properties: {
473
- identifier: getSubmissionValue(submissions, node.data.key).toString(),
474
- first_name: node.data.firstName ? getSubmissionValue(submissions, node.data.firstName).toString() : void 0,
475
- last_name: node.data.lastName ? getSubmissionValue(submissions, node.data.lastName).toString() : void 0,
476
- email: node.data.email ? getSubmissionValue(submissions, node.data.email).toString() : void 0,
477
- phone_number: node.data.phoneNumber ? getSubmissionValue(submissions, node.data.phoneNumber).toString() : void 0,
478
- custom_traits: node.data.customTraits ? Object.fromEntries(Object.entries(node.data.customTraits).map(([key, value]) => {
479
- var _a;
480
- return [key, (_a = submissions[value]) == null ? void 0 : _a.value];
481
- })) : void 0
482
- }
483
- });
484
- } catch (e) {
485
- logger.error(e);
486
- } finally {
487
- next(node.nextId);
488
- }
489
- }
490
- async function interpretJumpNode({
491
- next,
492
- node
493
- }) {
494
- next(node.data.targetId);
495
- }
496
- async function interpretAddSubmissionNode({
497
- next,
498
- node,
499
- logger,
500
- submissions,
501
- context
502
- }) {
503
- if (!submissions) {
504
- logger.error("Submissions not found");
505
- return;
506
- }
507
- submissions[node.data.key] = {
508
- type: "string",
509
- value: interpolateWithData(node.data.value, {
510
- submissions,
511
- context
512
- })
513
- };
514
- next(node.nextId);
515
- }
516
- async function interpretSubmitNode({
517
- chat,
518
- next,
519
- node,
520
- logger,
521
- apiClient,
522
- submissions,
523
- analytics,
524
- flow
525
- }) {
526
- const submit = async (skipConfirmation) => {
527
- if (skipConfirmation !== true) {
528
- await chat.userInput({
529
- type: "submit",
530
- key: void 0,
531
- config: {
532
- label: node.data.submitLabel
533
- }
534
- });
535
- }
536
- await chat.sendMessage({
537
- type: "loading"
538
- });
539
- const {
540
- anonymous_id,
541
- session_id
542
- } = analytics.getSessionInfo();
543
- const response = await apiClient.fetch(`/flow/submit`, {
544
- method: "POST",
545
- body: JSON.stringify({
546
- log_submit: false,
547
- integration_id: node.data.integrationId,
548
- anonymous_id,
549
- session_id,
550
- job: flow.job,
551
- submissions: getFlowSubmissionsPayload(submissions || {})
552
- })
553
- }).catch((e) => e);
554
- if (node.data.key)
555
- chat.addToSubmissions(node.data.key, {
556
- type: "integration",
557
- value: response
558
- });
559
- N(response).with({
560
- integration_response: _.select(_.union({
561
- service: _.optional(_.string),
562
- status: _.number,
563
- data: _.any
564
- }, {
565
- service: _.optional(_.string),
566
- status: _.number,
567
- error: {
568
- message: _.string,
569
- data: _.any
570
- }
571
- }))
572
- }, (integrationResponse) => {
573
- analytics.log({
574
- event: "FLOW_SUBMIT",
575
- properties: {
576
- flow_id: flow.id,
577
- flow_version: flow.version,
578
- flow_session_id: flow.data.flowSessionId,
579
- flow_build: flow.build,
580
- service: integrationResponse.service ?? "INVALID_SERVICE",
581
- response: {
582
- status: integrationResponse.status,
583
- payload: "data" in integrationResponse ? integrationResponse.data : integrationResponse.error.data ?? null
584
- },
585
- job: flow.job
586
- }
587
- });
588
- }).otherwise(() => {
589
- });
590
- await N(response).with(_.union({
591
- ats_data: _.select("redirect", {
592
- redirect_url: _.string,
593
- message: _.optional(_.union(_.string, _.nullish)),
594
- button_text: _.optional(_.union(_.string, _.nullish))
595
- })
596
- }, {
597
- integration_response: {
598
- data: _.select("redirect", {
599
- redirect_url: _.string,
600
- message: _.optional(_.union(_.string, _.nullish)),
601
- button_text: _.optional(_.union(_.string, _.nullish))
602
- })
603
- }
604
- }), async (response2) => {
605
- if (response2.redirect === void 0)
606
- return;
607
- await chat.sendMessage({
608
- type: "text",
609
- author: "bot",
610
- text: response2.redirect.message ?? "Almost there! Please complete your submission here:"
611
- });
612
- try {
613
- const href = new URL(response2.redirect.redirect_url);
614
- if (anonymous_id && !href.searchParams.has("anonymous_id")) {
615
- href.searchParams.set("anonymous_id", anonymous_id);
616
- }
617
- await chat.sendMessage({
618
- type: "link",
619
- href: href.toString(),
620
- text: response2.redirect.button_text ?? "Complete submission",
621
- onClick: () => {
622
- if (!session_id) {
623
- logger.error("session_id not set, cannot log FLOW_REDIRECT event");
624
- return;
625
- }
626
- analytics.log({
627
- event: "FLOW_REDIRECT",
628
- properties: {
629
- flow_build: flow.build,
630
- flow_id: flow.id,
631
- flow_session_id: session_id,
632
- flow_version: flow.version,
633
- href: href.toString(),
634
- job: flow.job
635
- }
636
- });
637
- }
638
- });
639
- } catch (e) {
640
- logger.error(`Invalid redirect URL: ${response2.redirect.redirect_url}`, e);
641
- chat.sendMessage({
642
- type: "system",
643
- variant: "error",
644
- text: "Couldn’t get the redirect URL."
645
- });
646
- }
647
- next(node.nextId);
648
- }).with({
649
- success: true
650
- }, async () => {
651
- if (node.data.skipConfirmation !== true) {
652
- await chat.sendMessage({
653
- type: "system",
654
- variant: "success",
655
- text: "Submission completed!"
656
- });
657
- }
658
- next(node.nextId);
659
- }).with(_.union({
660
- success: false,
661
- ats_data: _.select("error", {
662
- message: _.string
663
- })
664
- }, {
665
- integration_response: {
666
- error: _.select("error", {
667
- message: _.string
668
- })
669
- }
670
- }), async (response2) => {
671
- var _a;
672
- logger.error(response2.error);
673
- await chat.sendMessage({
674
- type: "system",
675
- variant: "error",
676
- text: ((_a = response2.error) == null ? void 0 : _a.message) || "Failed to submit"
677
- });
678
- await submit(false);
679
- }).otherwise(async (response2) => {
680
- logger.error(response2);
681
- await chat.sendMessage({
682
- type: "system",
683
- variant: "error",
684
- text: "Failed to submit"
685
- });
686
- await submit(false);
687
- });
688
- };
689
- await submit(node.data.skipConfirmation);
690
- }
691
- async function interpretLinkNode({
692
- chat,
693
- next,
694
- node,
695
- submissions,
696
- context
697
- }) {
698
- await chat.sendMessage({
699
- type: "link",
700
- href: interpolateWithData(node.data.href, {
701
- submissions,
702
- context
703
- }),
704
- text: interpolateWithData(node.data.cta, {
705
- submissions,
706
- context
707
- })
708
- });
709
- next(node.nextId);
710
- }
711
- async function interpretIfBlockNode({
712
- submissions,
713
- next,
714
- node,
715
- context
716
- }) {
717
- next(isIfBlockConditionMet(node, {
718
- submissions,
719
- context
720
- }) ? node.branchId : node.nextId);
721
- }
722
- async function interpretTextNode({
723
- chat,
724
- next,
725
- node,
726
- submissions,
727
- context
728
- }) {
729
- await chat.sendMessage({
730
- author: "bot",
731
- type: "text",
732
- text: interpolateWithData(node.data.text, {
733
- submissions,
734
- context
735
- })
736
- });
737
- next(node.nextId);
738
- }
739
- async function interpretImageNode({
740
- chat,
741
- next,
742
- node
743
- }) {
744
- await chat.sendMessage({
745
- author: "bot",
746
- type: "image",
747
- url: node.data.url,
748
- height: node.data.height,
749
- width: node.data.width
750
- });
751
- next(node.nextId);
752
- }
753
- async function interpretQuestionTextNode({
754
- chat,
755
- next,
756
- node,
757
- submissions,
758
- context
759
- }) {
760
- await chat.sendMessage({
761
- author: "bot",
762
- type: "text",
763
- text: interpolateWithData(node.data.question, {
764
- submissions,
765
- context
766
- })
767
- });
768
- const reply = node.data.format === "phone" ? await chat.userInput({
769
- key: node.data.key,
770
- type: "phone",
771
- config: {
772
- optional: node.data.optional,
773
- placeholder: node.data.placeholder,
774
- maxChars: node.data.maxChars,
775
- minChars: node.data.minChars
776
- }
777
- }) : await chat.userInput({
778
- key: node.data.key,
779
- type: "text",
780
- config: {
781
- optional: node.data.optional,
782
- placeholder: node.data.placeholder,
783
- format: node.data.format,
784
- maxChars: node.data.maxChars,
785
- minChars: node.data.minChars
786
- }
787
- });
788
- if (reply === null) {
789
- await chat.sendMessage({
790
- type: "system",
791
- variant: "info",
792
- text: "Skipped"
793
- });
794
- } else {
795
- await chat.sendMessage({
796
- author: "user",
797
- type: "text",
798
- text: reply.value
799
- });
800
- }
801
- next(node.nextId);
802
- }
803
- async function interpretQuestionNumberNode({
804
- chat,
805
- next,
806
- node,
807
- submissions,
808
- context
809
- }) {
810
- await chat.sendMessage({
811
- author: "bot",
812
- type: "text",
813
- text: interpolateWithData(node.data.question, {
814
- submissions,
815
- context
816
- })
817
- });
818
- const reply = await chat.userInput({
819
- key: node.data.key,
820
- type: "number",
821
- config: {
822
- max: node.data.max,
823
- min: node.data.min,
824
- optional: node.data.optional,
825
- placeholder: node.data.placeholder,
826
- decimalCases: node.data.decimalCases
827
- }
828
- });
829
- if (reply === null) {
830
- await chat.sendMessage({
831
- type: "system",
832
- variant: "info",
833
- text: "Skipped"
834
- });
835
- } else {
836
- await chat.sendMessage({
837
- author: "user",
838
- type: "text",
839
- text: reply.value.toString()
840
- });
841
- }
842
- next(node.nextId);
843
- }
844
- async function interpretQuestionEnumNode({
845
- chat,
846
- next,
847
- node,
848
- submissions,
849
- context
850
- }) {
851
- await chat.sendMessage({
852
- author: "bot",
853
- type: "text",
854
- text: interpolateWithData(node.data.question, {
855
- submissions,
856
- context
857
- })
858
- });
859
- const reply = await chat.userInput({
860
- key: node.data.key,
861
- type: "multiple-choice",
862
- config: node.data
863
- });
864
- if (reply.value.length === 0) {
865
- await chat.sendMessage({
866
- type: "system",
867
- variant: "info",
868
- text: "Skipped"
869
- });
870
- } else {
871
- await chat.sendMessage({
872
- author: "user",
873
- type: "text",
874
- text: node.data.options.filter((o2) => reply.value.includes(o2.value)).map((o2) => o2.label).join(", ")
875
- });
876
- }
877
- next(node.nextId);
878
- }
879
- async function interpretQuestionBooleanNode({
880
- chat,
881
- next,
882
- node,
883
- submissions,
884
- context
885
- }) {
886
- await chat.sendMessage({
887
- author: "bot",
888
- type: "text",
889
- text: interpolateWithData(node.data.question, {
890
- submissions,
891
- context
892
- })
893
- });
894
- const reply = await chat.userInput({
895
- key: node.data.key,
896
- type: "boolean",
897
- config: {
898
- optional: node.data.optional,
899
- labels: {
900
- true: node.data.trueLabel,
901
- false: node.data.falseLabel
902
- }
903
- }
904
- });
905
- if (reply === null) {
906
- await chat.sendMessage({
907
- type: "system",
908
- variant: "info",
909
- text: "Skipped"
910
- });
911
- } else {
912
- await chat.sendMessage({
913
- author: "user",
914
- type: "text",
915
- text: reply.value === true ? node.data.trueLabel : node.data.falseLabel
916
- });
917
- }
918
- next(node.nextId);
919
- }
920
- async function interpretQuestionAddressNode({
921
- chat,
922
- next,
923
- node
924
- }) {
925
- await chat.sendMessage({
926
- author: "bot",
927
- type: "text",
928
- text: node.data.question
929
- });
930
- const response = await chat.userInput({
931
- type: "address",
932
- key: node.data.key,
933
- config: {
934
- optional: node.data.optional,
935
- keys: node.data.keys,
936
- placeholder: node.data.placeholder
937
- }
938
- });
939
- if (response === null) {
940
- await chat.sendMessage({
941
- type: "system",
942
- variant: "info",
943
- text: "Skipped"
944
- });
945
- } else {
946
- const addressMessage = Object.values(response.value).filter((line) => line && line.trim().length > 0).join(", ");
947
- await chat.sendMessage({
948
- author: "user",
949
- type: "text",
950
- text: addressMessage
951
- });
952
- }
953
- return next(node.nextId);
954
- }
955
- async function interpretQuestionFileNode({
956
- node,
957
- chat,
958
- next,
959
- submissions,
960
- context
961
- }) {
962
- await chat.sendMessage({
963
- author: "bot",
964
- type: "text",
965
- text: interpolateWithData(node.data.question, {
966
- submissions,
967
- context
968
- })
969
- });
970
- const files = await chat.userInput({
971
- key: node.data.key,
972
- type: "file",
973
- config: {
974
- optional: node.data.optional,
975
- extensions: node.data.extensions,
976
- // default value for fileSizeLimitKib is 10MB
977
- fileSizeLimitKib: node.data.maxSizeKb ?? 10 * 1024,
978
- allowMultiple: node.data.multiple === true
979
- }
980
- });
981
- if (files === null) {
982
- await chat.sendMessage({
983
- type: "system",
984
- variant: "info",
985
- text: "Skipped"
986
- });
987
- } else {
988
- for (const file of files.value) {
989
- await chat.sendMessage({
990
- author: "user",
991
- type: "file",
992
- fileName: file.name,
993
- fileSizeKb: file.sizeKb
994
- });
995
- }
996
- }
997
- next(node.nextId);
998
- }
999
- async function interpretEndFlowNode({
1000
- chat,
1001
- end,
1002
- node
1003
- }) {
1004
- await chat.sendMessage({
1005
- type: "system",
1006
- variant: "info",
1007
- text: node.data.systemMessage
1008
- });
1009
- end();
1010
- }
1011
- const getSubmissionValueToCheck = ({
1012
- key,
1013
- path,
1014
- submissions,
1015
- context
1016
- }) => {
1017
- if (key === "$context") {
1018
- if (!path)
1019
- return void 0;
1020
- const contextData = get$1(context, path.join("."));
1021
- switch (typeof contextData) {
1022
- case "string":
1023
- return {
1024
- type: "string",
1025
- value: contextData
1026
- };
1027
- case "number":
1028
- return {
1029
- type: "number",
1030
- value: contextData
1031
- };
1032
- case "boolean":
1033
- return {
1034
- type: "boolean",
1035
- value: contextData
1036
- };
1037
- default:
1038
- console.warn(`Unexpected type for $context.${path.join(".")}`, contextData);
1039
- return void 0;
1040
- }
1041
- }
1042
- return submissions == null ? void 0 : submissions[key];
1043
- };
1044
- function debounce(func, wait, immediate) {
1045
- var timeout, args, context, timestamp, result;
1046
- if (null == wait)
1047
- wait = 100;
1048
- function later() {
1049
- var last = Date.now() - timestamp;
1050
- if (last < wait && last >= 0) {
1051
- timeout = setTimeout(later, wait - last);
1052
- } else {
1053
- timeout = null;
1054
- if (!immediate) {
1055
- result = func.apply(context, args);
1056
- context = args = null;
1057
- }
1058
- }
1059
- }
1060
- var debounced = function() {
1061
- context = this;
1062
- args = arguments;
1063
- timestamp = Date.now();
1064
- var callNow = immediate && !timeout;
1065
- if (!timeout)
1066
- timeout = setTimeout(later, wait);
1067
- if (callNow) {
1068
- result = func.apply(context, args);
1069
- context = args = null;
1070
- }
1071
- return result;
1072
- };
1073
- debounced.clear = function() {
1074
- if (timeout) {
1075
- clearTimeout(timeout);
1076
- timeout = null;
1077
- }
1078
- };
1079
- debounced.flush = function() {
1080
- if (timeout) {
1081
- result = func.apply(context, args);
1082
- context = args = null;
1083
- clearTimeout(timeout);
1084
- timeout = null;
1085
- }
1086
- };
1087
- return debounced;
1088
- }
1089
- debounce.debounce = debounce;
1090
- var debounce_1 = debounce;
1091
- const createDebounce = /* @__PURE__ */ getDefaultExportFromCjs(debounce_1);
1092
- function useMeasure(_temp) {
1093
- let {
1094
- debounce: debounce2,
1095
- scroll,
1096
- polyfill,
1097
- offsetSize
1098
- } = _temp === void 0 ? {
1099
- debounce: 0,
1100
- scroll: false,
1101
- offsetSize: false
1102
- } : _temp;
1103
- const ResizeObserver = polyfill || (typeof window === "undefined" ? class ResizeObserver {
1104
- } : window.ResizeObserver);
1105
- if (!ResizeObserver) {
1106
- throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
1107
- }
1108
- const [bounds, set2] = h({
1109
- left: 0,
1110
- top: 0,
1111
- width: 0,
1112
- height: 0,
1113
- bottom: 0,
1114
- right: 0,
1115
- x: 0,
1116
- y: 0
1117
- });
1118
- const state = _$1({
1119
- element: null,
1120
- scrollContainers: null,
1121
- resizeObserver: null,
1122
- lastBounds: bounds
1123
- });
1124
- const scrollDebounce = debounce2 ? typeof debounce2 === "number" ? debounce2 : debounce2.scroll : null;
1125
- const resizeDebounce = debounce2 ? typeof debounce2 === "number" ? debounce2 : debounce2.resize : null;
1126
- const mounted = _$1(false);
1127
- p(() => {
1128
- mounted.current = true;
1129
- return () => void (mounted.current = false);
1130
- });
1131
- const [forceRefresh, resizeChange, scrollChange] = F(() => {
1132
- const callback = () => {
1133
- if (!state.current.element)
1134
- return;
1135
- const {
1136
- left,
1137
- top,
1138
- width,
1139
- height,
1140
- bottom,
1141
- right,
1142
- x,
1143
- y: y2
1144
- } = state.current.element.getBoundingClientRect();
1145
- const size = {
1146
- left,
1147
- top,
1148
- width,
1149
- height,
1150
- bottom,
1151
- right,
1152
- x,
1153
- y: y2
1154
- };
1155
- if (state.current.element instanceof HTMLElement && offsetSize) {
1156
- size.height = state.current.element.offsetHeight;
1157
- size.width = state.current.element.offsetWidth;
1158
- }
1159
- Object.freeze(size);
1160
- if (mounted.current && !areBoundsEqual(state.current.lastBounds, size))
1161
- set2(state.current.lastBounds = size);
1162
- };
1163
- return [callback, resizeDebounce ? createDebounce(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(callback, scrollDebounce) : callback];
1164
- }, [set2, offsetSize, scrollDebounce, resizeDebounce]);
1165
- function removeListeners() {
1166
- if (state.current.scrollContainers) {
1167
- state.current.scrollContainers.forEach((element) => element.removeEventListener("scroll", scrollChange, true));
1168
- state.current.scrollContainers = null;
1169
- }
1170
- if (state.current.resizeObserver) {
1171
- state.current.resizeObserver.disconnect();
1172
- state.current.resizeObserver = null;
1173
- }
1174
- }
1175
- function addListeners() {
1176
- if (!state.current.element)
1177
- return;
1178
- state.current.resizeObserver = new ResizeObserver(scrollChange);
1179
- state.current.resizeObserver.observe(state.current.element);
1180
- if (scroll && state.current.scrollContainers) {
1181
- state.current.scrollContainers.forEach((scrollContainer) => scrollContainer.addEventListener("scroll", scrollChange, {
1182
- capture: true,
1183
- passive: true
1184
- }));
1185
- }
1186
- }
1187
- const ref = (node) => {
1188
- if (!node || node === state.current.element)
1189
- return;
1190
- removeListeners();
1191
- state.current.element = node;
1192
- state.current.scrollContainers = findScrollContainers(node);
1193
- addListeners();
1194
- };
1195
- useOnWindowScroll(scrollChange, Boolean(scroll));
1196
- useOnWindowResize(resizeChange);
1197
- p(() => {
1198
- removeListeners();
1199
- addListeners();
1200
- }, [scroll, scrollChange, resizeChange]);
1201
- p(() => removeListeners, []);
1202
- return [ref, bounds, forceRefresh];
1203
- }
1204
- function useOnWindowResize(onWindowResize) {
1205
- p(() => {
1206
- const cb = onWindowResize;
1207
- window.addEventListener("resize", cb);
1208
- return () => void window.removeEventListener("resize", cb);
1209
- }, [onWindowResize]);
1210
- }
1211
- function useOnWindowScroll(onScroll, enabled) {
1212
- p(() => {
1213
- if (enabled) {
1214
- const cb = onScroll;
1215
- window.addEventListener("scroll", cb, {
1216
- capture: true,
1217
- passive: true
1218
- });
1219
- return () => void window.removeEventListener("scroll", cb, true);
1220
- }
1221
- }, [onScroll, enabled]);
1222
- }
1223
- function findScrollContainers(element) {
1224
- const result = [];
1225
- if (!element || element === document.body)
1226
- return result;
1227
- const {
1228
- overflow,
1229
- overflowX,
1230
- overflowY
1231
- } = window.getComputedStyle(element);
1232
- if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
1233
- result.push(element);
1234
- return [...result, ...findScrollContainers(element.parentElement)];
1235
- }
1236
- const keys = ["x", "y", "top", "bottom", "left", "right", "width", "height"];
1237
- const areBoundsEqual = (a2, b) => keys.every((key) => a2[key] === b[key]);
1238
- const SendButton = ({
1239
- class: className,
1240
- ...props
1241
- }) => o$1("button", {
1242
- class: clsx("bg-accent-9 active:bg-accent-10 pointer-coarse:touch-hitbox fr flex-shrink-0 rounded-full p-2 text-white transition-all disabled:cursor-not-allowed disabled:opacity-50", className),
1243
- type: "submit",
1244
- ...props,
1245
- children: o$1("svg", {
1246
- class: "block",
1247
- width: "16",
1248
- height: "16",
1249
- viewBox: "0 0 16 16",
1250
- fill: "transparent",
1251
- stroke: "currentColor",
1252
- "stroke-linecap": "round",
1253
- "stroke-width": "2",
1254
- children: [o$1("title", {
1255
- children: "Send"
1256
- }), o$1("path", {
1257
- d: "M3.5 7.5L8 3L12.5 7.5"
1258
- }), o$1("path", {
1259
- d: "M8 4V13"
1260
- })]
1261
- })
1262
- });
1263
- const TYPING_SPEED_MS_PER_CHARACTER = 25;
1264
- const scrollToEndFn$ = a$2({
1265
- instant: () => {
1266
- },
1267
- smooth: () => {
1268
- }
1269
- });
1270
- const chatStore = {
1271
- onSubmitSuccessFn$: a$2(() => {
1272
- }),
1273
- isBotTyping$: a$2(false),
1274
- scrollToEnd: {
1275
- instant: () => scrollToEndFn$.value.instant(),
1276
- smooth: () => scrollToEndFn$.value.smooth()
1277
- }
1278
- };
1279
- const useChatService = () => {
1280
- const chatRef = _$1(null);
1281
- y(() => {
1282
- scrollToEndFn$.value = {
1283
- instant: () => {
1284
- var _a;
1285
- return (_a = chatRef.current) == null ? void 0 : _a.scrollTo({
1286
- top: chatRef.current.scrollHeight,
1287
- behavior: "instant"
1288
- });
1289
- },
1290
- smooth: () => {
1291
- if (!chatRef.current)
1292
- return;
1293
- if (chatRef.current.scrollHeight - chatRef.current.scrollTop <= chatRef.current.clientHeight * 2) {
1294
- chatRef.current.scrollTo({
1295
- top: chatRef.current.scrollHeight,
1296
- behavior: "smooth"
1297
- });
1298
- }
1299
- }
1300
- };
1301
- }, [chatRef]);
1302
- const chatService = F(() => {
1303
- const inputFn = ({
1304
- input,
1305
- signal: signal2
1306
- }) => {
1307
- if (signal2 == null ? void 0 : signal2.aborted)
1308
- throw new AbortedError();
1309
- store.setInput(input);
1310
- return new Promise((resolve) => {
1311
- const submitFunction = (submission) => {
1312
- if (signal2 == null ? void 0 : signal2.aborted)
1313
- throw new AbortedError();
1314
- store.setInput(void 0);
1315
- if (input.key) {
1316
- store.setSubmission(input.key, submission);
1317
- }
1318
- resolve(submission);
1319
- };
1320
- chatStore.onSubmitSuccessFn$.value = submitFunction;
1321
- });
1322
- };
1323
- return {
1324
- addToSubmissions: (key, value) => store.setSubmission(key, value),
1325
- send: async ({
1326
- message,
1327
- signal: signal2,
1328
- groupId
1329
- }) => {
1330
- await N(message).with({
1331
- author: "bot",
1332
- type: "text"
1333
- }, async (message2) => {
1334
- if (signal2 == null ? void 0 : signal2.aborted)
1335
- throw new AbortedError();
1336
- chatStore.isBotTyping$.value = true;
1337
- const typingTime = Math.min(Math.max(20, message2.text.length), 100) * TYPING_SPEED_MS_PER_CHARACTER;
1338
- await new Promise((resolve) => {
1339
- return setTimeout(resolve, typingTime, {
1340
- signal: signal2
1341
- });
1342
- });
1343
- chatStore.isBotTyping$.value = false;
1344
- }).otherwise(async () => void 0);
1345
- if (signal2 == null ? void 0 : signal2.aborted)
1346
- throw new AbortedError();
1347
- store.addMessage(message, groupId);
1348
- },
1349
- input: inputFn
1350
- };
1351
- }, []);
1352
- return {
1353
- chatRef,
1354
- chatService
1355
- };
1356
- };
1357
- const SkipButton = ({
1358
- class: className,
1359
- ...props
1360
- }) => o$1("button", {
1361
- type: "button",
1362
- class: clsx("fr text-neutral-9 flex flex-shrink-0 items-center justify-center gap-1 rounded-full py-[6px] pl-2 pr-3 text-sm underline-offset-2 transition-all", className),
1363
- ...props,
1364
- children: [o$1("svg", {
1365
- class: "block",
1366
- width: "16",
1367
- height: "16",
1368
- viewBox: "0 0 16 16",
1369
- fill: "transparent",
1370
- stroke: "currentColor",
1371
- "stroke-linecap": "round",
1372
- "stroke-width": "1.5",
1373
- children: [o$1("title", {
1374
- children: "Skip"
1375
- }), o$1("path", {
1376
- d: "M3.25 11.25A5 5 0 0 1 12 7"
1377
- }), o$1("path", {
1378
- d: "M13.25 4.5V8.25H9.5"
1379
- })]
1380
- }), "Skip"]
1381
- });
1382
- const countries = {
1383
- Afghanistan: "93",
1384
- Albania: "355",
1385
- Algeria: "213",
1386
- "American Samoa": "1 684",
1387
- Andorra: "376",
1388
- Angola: "244",
1389
- Anguilla: "1 264",
1390
- Antarctica: "672",
1391
- "Antigua and Barbuda": "1 268",
1392
- Argentina: "54",
1393
- Armenia: "374",
1394
- Aruba: "297",
1395
- Australia: "61",
1396
- Austria: "43",
1397
- Azerbaijan: "994",
1398
- Bahrain: "973",
1399
- Bangladesh: "880",
1400
- Barbados: "1 246",
1401
- Belarus: "375",
1402
- Belgium: "32",
1403
- Belize: "501",
1404
- Benin: "229",
1405
- Bermuda: "1 441",
1406
- Bhutan: "975",
1407
- Bolivia: "591",
1408
- "Bosnia and Herzegovina": "387",
1409
- Botswana: "267",
1410
- "Bouvet Island": "47",
1411
- Brazil: "55",
1412
- "British Indian Ocean Territory": "246",
1413
- "British Virgin Islands": "1 284",
1414
- Brunei: "673",
1415
- Bulgaria: "359",
1416
- "Burkina Faso": "226",
1417
- Burundi: "257",
1418
- "Cabo Verde": "238",
1419
- Cambodia: "855",
1420
- Cameroon: "237",
1421
- Canada: "1",
1422
- "Caribbean Netherlands": "599",
1423
- "Cayman Islands": "1 345",
1424
- "Central African Republic": "236",
1425
- Chad: "235",
1426
- Chile: "56",
1427
- China: "86",
1428
- "Christmas Island": "61",
1429
- "Cocos (Keeling) Islands": "61",
1430
- Colombia: "57",
1431
- Comoros: "269",
1432
- "Cook Islands": "682",
1433
- "Costa Rica": "506",
1434
- Croatia: "385",
1435
- Cuba: "53",
1436
- Curaçao: "599",
1437
- Cyprus: "357",
1438
- Czechia: "420",
1439
- "Côte d'Ivoire": "225",
1440
- "Democratic Republic of the Congo": "243",
1441
- Denmark: "45",
1442
- Djibouti: "253",
1443
- "Dominican Republic": "1 809",
1444
- Ecuador: "593",
1445
- Egypt: "20",
1446
- "El Salvador": "503",
1447
- "Equatorial Guinea": "240",
1448
- Eritrea: "291",
1449
- Estonia: "372",
1450
- Eswatini: "268",
1451
- Ethiopia: "251",
1452
- "Falkland Islands (Islas Malvinas)": "500",
1453
- "Faroe Islands": "298",
1454
- Fiji: "679",
1455
- Finland: "358",
1456
- France: "33",
1457
- "French Guiana": "594",
1458
- "French Polynesia": "689",
1459
- "French Southern and Antarctic Lands": "262",
1460
- Gabon: "241",
1461
- Georgia: "995",
1462
- Germany: "49",
1463
- Ghana: "233",
1464
- Gibraltar: "350",
1465
- Greece: "30",
1466
- Greenland: "299",
1467
- Grenada: "1 473",
1468
- Guadeloupe: "590",
1469
- Guam: "1 671",
1470
- Guatemala: "502",
1471
- Guernsey: "44",
1472
- Guinea: "224",
1473
- "Guinea-Bissau": "245",
1474
- Guyana: "592",
1475
- Haiti: "509",
1476
- Honduras: "504",
1477
- "Hong Kong": "852",
1478
- Hungary: "36",
1479
- Iceland: "354",
1480
- India: "91",
1481
- Indonesia: "62",
1482
- Iran: "98",
1483
- Iraq: "964",
1484
- Ireland: "353",
1485
- "Isle of Man": "44",
1486
- Israel: "972",
1487
- Italy: "39",
1488
- Jamaica: "1 876",
1489
- Japan: "81",
1490
- Jersey: "44",
1491
- Jordan: "962",
1492
- Kazakhstan: "7",
1493
- Kenya: "254",
1494
- Kiribati: "686",
1495
- Kosovo: "383",
1496
- Kuwait: "965",
1497
- Kyrgyzstan: "996",
1498
- Laos: "856",
1499
- Latvia: "371",
1500
- Lebanon: "961",
1501
- Lesotho: "266",
1502
- Liberia: "231",
1503
- Libya: "218",
1504
- Liechtenstein: "423",
1505
- Lithuania: "370",
1506
- Luxembourg: "352",
1507
- Macao: "853",
1508
- Madagascar: "261",
1509
- Malawi: "265",
1510
- Malaysia: "60",
1511
- Maldives: "960",
1512
- Mali: "223",
1513
- Malta: "356",
1514
- "Marshall Islands": "692",
1515
- Martinique: "596",
1516
- Mauritania: "222",
1517
- Mauritius: "230",
1518
- Mayotte: "262",
1519
- Mexico: "52",
1520
- Micronesia: "691",
1521
- Moldova: "373",
1522
- Monaco: "377",
1523
- Mongolia: "976",
1524
- Montenegro: "382",
1525
- Montserrat: "1 664",
1526
- Morocco: "212",
1527
- Mozambique: "258",
1528
- "Myanmar (Burma)": "95",
1529
- Namibia: "264",
1530
- Nauru: "674",
1531
- Nepal: "977",
1532
- Netherlands: "31",
1533
- "New Caledonia": "687",
1534
- "New Zealand": "64",
1535
- Nicaragua: "505",
1536
- Niger: "227",
1537
- Nigeria: "234",
1538
- Niue: "683",
1539
- "Norfolk Island": "672",
1540
- "North Korea": "850",
1541
- "North Macedonia": "389",
1542
- "Northern Mariana Islands": "1 670",
1543
- Norway: "47",
1544
- Oman: "968",
1545
- Pakistan: "92",
1546
- Palau: "680",
1547
- Palestine: "970",
1548
- Panama: "507",
1549
- "Papua New Guinea": "675",
1550
- Paraguay: "595",
1551
- Peru: "51",
1552
- Philippines: "63",
1553
- "Pitcairn Islands": "64",
1554
- Poland: "48",
1555
- Portugal: "351",
1556
- "Puerto Rico": "1 787",
1557
- Qatar: "974",
1558
- Romania: "40",
1559
- Russia: "7",
1560
- Rwanda: "250",
1561
- Réunion: "262",
1562
- "Saint Barthélemy": "590",
1563
- "Saint Helena, Ascension and Tristan da Cunha": "290",
1564
- "Saint Kitts and Nevis": "1 869",
1565
- "Saint Lucia": "1 758",
1566
- "Saint Martin": "590",
1567
- "Saint Pierre and Miquelon": "508",
1568
- "Saint Vincent and the Grenadines": "1 784",
1569
- Samoa: "685",
1570
- "San Marino": "378",
1571
- "Saudi Arabia": "966",
1572
- Senegal: "221",
1573
- Serbia: "381",
1574
- Seychelles: "248",
1575
- "Sierra Leone": "232",
1576
- Singapore: "65",
1577
- "Sint Maarten": "1 721",
1578
- Slovakia: "421",
1579
- Slovenia: "386",
1580
- "Solomon Islands": "677",
1581
- Somalia: "252",
1582
- "South Africa": "27",
1583
- "South Georgia and the South Sandwich Islands": "500",
1584
- "South Korea": "82",
1585
- "South Sudan": "211",
1586
- Spain: "34",
1587
- "Sri Lanka": "94",
1588
- Sudan: "249",
1589
- Suriname: "597",
1590
- "Svalbard and Jan Mayen": "47",
1591
- Sweden: "46",
1592
- Switzerland: "41",
1593
- Syria: "963",
1594
- "São Tomé and Príncipe": "239",
1595
- Taiwan: "886",
1596
- Tajikistan: "992",
1597
- Tanzania: "255",
1598
- Thailand: "66",
1599
- "The Bahamas": "1 242",
1600
- "The Gambia": "220",
1601
- "Timor-Leste": "670",
1602
- Togo: "228",
1603
- Tokelau: "690",
1604
- Tonga: "676",
1605
- "Trinidad and Tobago": "1 868",
1606
- Tunisia: "216",
1607
- Turkmenistan: "993",
1608
- "Turks and Caicos Islands": "1 649",
1609
- Tuvalu: "688",
1610
- Türkiye: "90",
1611
- "U.S. Virgin Islands": "1 340",
1612
- Uganda: "256",
1613
- Ukraine: "380",
1614
- "United Arab Emirates": "971",
1615
- "United Kingdom": "44",
1616
- "United States": "1",
1617
- "United States Minor Outlying Islands": "1",
1618
- Uruguay: "598",
1619
- Uzbekistan: "998",
1620
- Vanuatu: "678",
1621
- "Vatican City": "379",
1622
- Venezuela: "58",
1623
- Vietnam: "84",
1624
- "Wallis and Futuna": "681",
1625
- "Western Sahara": "212",
1626
- Yemen: "967",
1627
- Zambia: "260",
1628
- Zimbabwe: "263",
1629
- "Åland Islands": "358"
1630
- };
1631
- const keyToAddressComponents = {
1632
- line1: ["street_number", "floor", "room", "premise"],
1633
- line2: ["subpremise", "street_address", "route"],
1634
- line3: ["sublocality", "neighborhood"],
1635
- city: ["locality", "postal_town"],
1636
- state: ["administrative_area_level_1"],
1637
- postcode: ["postal_code"],
1638
- country: ["country"]
1639
- };
1640
- const fieldMapKeys = Object.keys(keyToAddressComponents);
1641
- const addressComponentsToFields = (addressComponents) => {
1642
- return fieldMapKeys.reduce((acc, key) => {
1643
- const componentTypes = keyToAddressComponents[key];
1644
- const value = addressComponents.filter((component) => component.types.some((type) => componentTypes.includes(type))).map((component) => component.long_name).join(", ");
1645
- if (value) {
1646
- acc[key] = value;
1647
- }
1648
- return acc;
1649
- }, {});
1650
- };
1651
- const dummyDivBecauseGoogleRequiresIt = document.createElement("div");
1652
- const useGooglePlaces = () => {
1653
- return F(() => {
1654
- const {
1655
- google
1656
- } = window;
1657
- if ("google" in window === false || "maps" in google === false || "places" in google.maps === false) {
1658
- return {
1659
- enabled: false
1660
- };
1661
- }
1662
- const autocomplete = new google.maps.places.AutocompleteService();
1663
- const places = new google.maps.places.PlacesService(dummyDivBecauseGoogleRequiresIt);
1664
- return {
1665
- enabled: true,
1666
- getPredictions: async (input) => {
1667
- const {
1668
- predictions
1669
- } = await autocomplete.getPlacePredictions({
1670
- input,
1671
- language: "en"
1672
- });
1673
- return predictions.map((p2) => ({
1674
- label: p2.description,
1675
- value: p2.place_id
1676
- }));
1677
- },
1678
- getPlaceDetails: async (placeId) => {
1679
- const result = await new Promise((resolve, reject) => places.getDetails({
1680
- placeId,
1681
- fields: ["address_components"],
1682
- language: "en"
1683
- }, (result2, status) => {
1684
- if (status !== google.maps.places.PlacesServiceStatus["OK"])
1685
- return reject(status);
1686
- if (result2 === null)
1687
- return reject("ZERO_RESULTS");
1688
- return resolve({
1689
- ok: true,
1690
- place: result2
1691
- });
1692
- })).catch(async (e) => {
1693
- console.error("Failed to get address details", e);
1694
- return {
1695
- ok: false
1696
- };
1697
- });
1698
- return result;
1699
- }
1700
- };
1701
- }, []);
1702
- };
1703
- const BackButton = (props) => {
1704
- return o$1("button", {
1705
- type: "button",
1706
- class: "text-neutral-10 hover:bg-neutral-4 hover:text-neutral-12 hover:border-neutral-5 flex items-center gap-1 rounded-[18px] border border-solid border-transparent px-3 py-1 pl-1.5 text-sm transition-colors",
1707
- ...props,
1708
- children: [o$1("svg", {
1709
- width: "16",
1710
- height: "16",
1711
- viewBox: "0 0 16 16",
1712
- stroke: "currentColor",
1713
- "stroke-width": "1.5",
1714
- fill: "none",
1715
- xmlns: "http://www.w3.org/2000/svg",
1716
- children: o$1("path", {
1717
- d: "M10 3L5 8L10 13"
1718
- })
1719
- }), o$1("span", {
1720
- children: "Back"
1721
- })]
1722
- });
1723
- };
1724
- const optionManual = {
1725
- label: "Fill in manually",
1726
- value: ""
1727
- };
1728
- const ChatInputAddress = ({
1729
- input,
1730
- onSubmitSuccess
1731
- }) => {
1732
- const [query, setQuery] = h("");
1733
- const [addressFields, setAddressFields] = h();
1734
- const [suggestions, setSuggestions] = h([]);
1735
- const [placeId, setPlaceId] = h();
1736
- const {
1737
- enabled,
1738
- getPredictions,
1739
- getPlaceDetails
1740
- } = useGooglePlaces();
1741
- const [state, setState] = h(enabled ? "query" : "manual");
1742
- const searchPlaces = (query2) => {
1743
- invariant(enabled, "Query state should not be enabled if Google Places isn't available");
1744
- setQuery(query2);
1745
- if (query2 === "")
1746
- setSuggestions([]);
1747
- getPredictions(query2).then((predictions) => {
1748
- setSuggestions(predictions);
1749
- });
1750
- };
1751
- p(() => {
1752
- if (!enabled)
1753
- return;
1754
- if (placeId === void 0 || placeId === "")
1755
- return;
1756
- getPlaceDetails(placeId).then((result) => {
1757
- if (!result.ok || !result.place.address_components) {
1758
- setAddressFields({});
1759
- return;
1760
- }
1761
- const fields = addressComponentsToFields(result.place.address_components);
1762
- setAddressFields(fields);
1763
- setState("details");
1764
- });
1765
- return () => {
1766
- setAddressFields(void 0);
1767
- };
1768
- }, [placeId, getPlaceDetails, enabled]);
1769
- switch (state) {
1770
- case "query": {
1771
- invariant(enabled, "Query state should not be enabled if Google Places isn't available");
1772
- return o$1(ChatInputAddressQuery, {
1773
- input,
1774
- onSkip: () => onSubmitSuccess(null),
1775
- onAddressSelect: (e) => {
1776
- setPlaceId(e);
1777
- setState("loading");
1778
- },
1779
- onAddressSearch: (e) => {
1780
- searchPlaces(e);
1781
- },
1782
- suggestions,
1783
- query
1784
- });
1785
- }
1786
- case "loading":
1787
- return o$1(ChatInputAddressDetails, {
1788
- input,
1789
- onSubmitSuccess,
1790
- addressFields: {},
1791
- actions: o$1(BackButton, {
1792
- onClick: () => {
1793
- setPlaceId(void 0);
1794
- setState("query");
1795
- }
1796
- })
1797
- });
1798
- case "details":
1799
- invariant(addressFields !== void 0);
1800
- return o$1(ChatInputAddressDetails, {
1801
- input,
1802
- onSubmitSuccess,
1803
- addressFields,
1804
- actions: o$1(BackButton, {
1805
- onClick: () => {
1806
- setPlaceId(void 0);
1807
- setState("query");
1808
- }
1809
- })
1810
- });
1811
- case "manual":
1812
- return o$1(ChatInputAddressDetails, {
1813
- input,
1814
- onSubmitSuccess,
1815
- addressFields: {},
1816
- actions: enabled ? o$1(BackButton, {
1817
- onClick: () => {
1818
- setPlaceId(void 0);
1819
- setState("query");
1820
- }
1821
- }) : void 0
1822
- });
1823
- }
1824
- };
1825
- const ChatInputAddressQuery = ({
1826
- input,
1827
- onSkip,
1828
- suggestions,
1829
- onAddressSelect,
1830
- query,
1831
- onAddressSearch
1832
- }) => {
1833
- const ref = _$1(null);
1834
- y(() => {
1835
- if (ref.current) {
1836
- ref.current.focus();
1837
- ref.current.select();
1838
- }
1839
- }, []);
1840
- return o$1(k, {
1841
- children: [o$1("form", {
1842
- noValidate: true,
1843
- onSubmit: (e) => {
1844
- e.preventDefault();
1845
- const formData = new FormData(e.currentTarget);
1846
- const address = formData.get("address");
1847
- if (typeof address !== "string")
1848
- return;
1849
- onAddressSearch(address);
1850
- },
1851
- class: "flex gap-1 p-2.5",
1852
- children: [o$1("div", {
1853
- class: "group relative flex-1",
1854
- children: [o$1("input", {
1855
- ref,
1856
- name: "address",
1857
- id: "chat-address",
1858
- autocomplete: "address-line1 country-name postal-code",
1859
- autoFocus: true,
1860
- class: "outline-divider ease-expo-out placeholder:text-neutral-10 text-neutral-12 focus-visible:outline-accent-7 caret-accent-9 bg-lowest w-full rounded-full px-3 py-1 text-base outline outline-2 transition-all",
1861
- placeholder: input.config.placeholder || "Type and search for places...",
1862
- defaultValue: query
1863
- }), o$1("button", {
1864
- type: "submit",
1865
- class: "touch-hitbox text-neutral-12 hover:bg-neutral-3 fr absolute bottom-0 right-0 top-0 flex cursor-pointer items-center gap-1 rounded-full px-3 transition-all",
1866
- children: o$1("svg", {
1867
- width: "16",
1868
- height: "16",
1869
- viewBox: "0 0 16 16",
1870
- fill: "none",
1871
- xmlns: "http://www.w3.org/2000/svg",
1872
- children: [o$1("g", {
1873
- id: "inploi",
1874
- stroke: "currentColor",
1875
- "stroke-linecap": "round",
1876
- "stroke-linejoin": "round",
1877
- strokeWidth: "1.5",
1878
- children: [o$1("circle", {
1879
- cx: "7",
1880
- cy: "7",
1881
- r: "4"
1882
- }), o$1("path", {
1883
- d: "M10 10L13 13"
1884
- })]
1885
- }), o$1("span", {
1886
- class: "sr-only",
1887
- children: "Search"
1888
- })]
1889
- })
1890
- })]
1891
- }), input.config.optional && o$1(SkipButton, {
1892
- class: "",
1893
- onClick: onSkip
1894
- })]
1895
- }), o$1("ul", {
1896
- children: [suggestions.map((suggestion) => o$1("li", {
1897
- children: o$1("button", {
1898
- class: "text-neutral-11 fr hover:bg-neutral-3 focus-visible:bg-neutral-3 hover:text-neutral-12 border-b-neutral-3 flex w-full items-center border border-b border-solid border-transparent px-4 py-3 text-sm transition-colors duration-100",
1899
- onClick: () => {
1900
- onAddressSelect(suggestion.value);
1901
- },
1902
- children: [o$1("span", {
1903
- class: "flex-grow",
1904
- children: suggestion.label
1905
- }), o$1("svg", {
1906
- class: "flex-none",
1907
- width: "16",
1908
- height: "16",
1909
- viewBox: "0 0 16 16",
1910
- stroke: "currentColor",
1911
- "stroke-width": "1.5",
1912
- fill: "none",
1913
- xmlns: "http://www.w3.org/2000/svg",
1914
- children: o$1("path", {
1915
- d: "M6 3L11 8L6 13"
1916
- })
1917
- })]
1918
- })
1919
- }, suggestion.label)), o$1("li", {
1920
- children: o$1("button", {
1921
- class: "text-neutral-11 fr hover:bg-neutral-3 focus-visible:bg-neutral-3 hover:text-neutral-12 border-b-neutral-3 flex w-full items-center border border-b border-solid border-transparent px-4 py-3 text-sm transition-colors duration-100",
1922
- onClick: () => {
1923
- onAddressSelect(optionManual.value);
1924
- },
1925
- children: o$1("span", {
1926
- class: "flex-grow",
1927
- children: optionManual.label
1928
- })
1929
- })
1930
- }, optionManual.label)]
1931
- })]
1932
- });
1933
- };
1934
- const addressKeyToLabel = {
1935
- line1: "Line 1",
1936
- line2: "Line 2",
1937
- line3: "Line 3",
1938
- city: "City",
1939
- state: "State",
1940
- postcode: "Postcode",
1941
- country: "Country"
1942
- };
1943
- const ChatInputAddressDetails = ({
1944
- addressFields,
1945
- onSubmitSuccess,
1946
- actions,
1947
- input
1948
- }) => {
1949
- const ref = _$1(null);
1950
- y(() => {
1951
- if (ref.current) {
1952
- const firstInput = ref.current.querySelector("input");
1953
- if (firstInput) {
1954
- firstInput.focus();
1955
- firstInput.select();
1956
- }
1957
- }
1958
- }, []);
1959
- const countryNames = Object.keys(countries);
1960
- return o$1("form", {
1961
- class: "bg-neutral-1/90 flex flex-col justify-end gap-2 p-2",
1962
- onSubmit: (e) => {
1963
- const formData = new FormData(e.currentTarget);
1964
- const fields = Object.fromEntries(formData.entries());
1965
- onSubmitSuccess({
1966
- type: "address",
1967
- value: fields
1968
- });
1969
- },
1970
- children: [o$1("div", {
1971
- class: "bg-neutral-3 border-neutral-5 grid items-center gap-1.5 rounded-2xl border pb-2 pl-4 pr-3 pt-3 [grid-template-columns:min-content_1fr]",
1972
- ref,
1973
- children: fieldMapKeys.map((key, i2) => {
1974
- const labelId = `isdk_${key}`;
1975
- const name = input.config.keys[key];
1976
- if (!name)
1977
- return null;
1978
- return o$1(k, {
1979
- children: [o$1("label", {
1980
- for: labelId,
1981
- class: "text-neutral-9 [&:has(+*>input:focus)]:text-neutral-11 w-24 pb-2 text-xs uppercase leading-3 tracking-widest transition-colors",
1982
- children: addressKeyToLabel[key]
1983
- }), o$1("div", {
1984
- class: "flex flex-col items-stretch gap-1.5",
1985
- children: [key === "country" ? o$1("div", {
1986
- class: "relative",
1987
- children: [o$1("select", {
1988
- class: "text-neutral-12 hover:bg-neutral-4 placeholder:text-neutral-8 focus:bg-neutral-5 w-full flex-1 appearance-none rounded-lg border-solid bg-transparent bg-none px-3 py-1.5 text-base transition-colors focus:outline-none",
1989
- name,
1990
- id: labelId,
1991
- defaultValue: addressFields[key],
1992
- required: true,
1993
- children: [addressFields.country && !countryNames.includes(addressFields.country) ? o$1("option", {
1994
- value: addressFields[key],
1995
- children: addressFields[key]
1996
- }) : o$1("option", {
1997
- value: "",
1998
- children: "Select a country"
1999
- }), countryNames.map((countryName) => o$1("option", {
2000
- value: countryName,
2001
- children: countryName
2002
- }, countryName))]
2003
- }), o$1("svg", {
2004
- class: "text-neutral-12 absolute bottom-2.5 right-2 flex items-center justify-center",
2005
- width: "16",
2006
- height: "16",
2007
- stroke: "currentColor",
2008
- "stroke-width": "1.5",
2009
- "stroke-linecap": "round",
2010
- "stroke-linejoin": "round",
2011
- viewBox: "0 0 16 16",
2012
- fill: "none",
2013
- xmlns: "http://www.w3.org/2000/svg",
2014
- children: o$1("path", {
2015
- d: "M4 6.5L8 10.5L12 6.5"
2016
- })
2017
- })]
2018
- }) : o$1("input", {
2019
- autoFocus: i2 === 0 ? true : void 0,
2020
- class: "text-neutral-12 hover:bg-neutral-4 placeholder:text-neutral-8 focus:bg-neutral-5 flex-1 rounded-lg border-solid bg-transparent px-3 py-1.5 text-base transition-colors autofill:shadow-[inset_0_0_0_1000px_hsl(210_16.7%_97.6%)] focus:outline-none",
2021
- name,
2022
- id: labelId,
2023
- defaultValue: addressFields[key],
2024
- required: true
2025
- }), i2 !== fieldMapKeys.length - 1 && o$1("hr", {
2026
- class: "border-b-neutral-5 m-0 w-full border-b border-solid"
2027
- }), i2 === fieldMapKeys.length - 1 && o$1("hr", {
2028
- class: "m-0 w-full border-b border-b-transparent"
2029
- })]
2030
- })]
2031
- });
2032
- })
2033
- }), o$1("div", {
2034
- class: "flex w-full flex-1 ",
2035
- children: [o$1("div", {
2036
- class: "flex-grow",
2037
- children: actions
2038
- }), o$1(SendButton, {
2039
- class: "flex items-center justify-center"
2040
- })]
2041
- })]
2042
- });
2043
- };
2044
- const useFocusOnMount = () => {
2045
- const focusRef = _$1(null);
2046
- p(() => {
2047
- var _a;
2048
- (_a = focusRef.current) == null ? void 0 : _a.focus();
2049
- }, []);
2050
- return focusRef;
2051
- };
2052
- const options = ["true", "false"];
2053
- const AnswerSchema = picklist(options);
2054
- const FIELD_NAME = "answer";
2055
- const booleanButtonListClass = "flex items-center gap-2 p-2.5";
2056
- const BooleanOption = k$1(({
2057
- label,
2058
- ...props
2059
- }, ref) => {
2060
- return o$1("button", {
2061
- class: "bg-lowest ease-expo-out ring-divider text-neutral-12 active:ring-accent-7 active:bg-accent-2 active:text-accent-11 fr block w-full overflow-hidden rounded-2xl px-2.5 py-2.5 ring-2 transition-all selection:bg-transparent",
2062
- ...props,
2063
- ref,
2064
- children: o$1("p", {
2065
- class: "truncate text-center text-base",
2066
- children: label
2067
- })
2068
- });
2069
- });
2070
- const ChatInputBoolean = ({
2071
- input,
2072
- onSubmitSuccess
2073
- }) => {
2074
- const focusRef = useFocusOnMount();
2075
- return o$1("form", {
2076
- noValidate: true,
2077
- class: "",
2078
- onSubmit: (e) => {
2079
- e.preventDefault();
2080
- const value = getFormSubmitter(e).value;
2081
- const answer = parse(AnswerSchema, value);
2082
- onSubmitSuccess({
2083
- type: "boolean",
2084
- value: answer === "true"
2085
- });
2086
- },
2087
- children: [o$1("ul", {
2088
- class: booleanButtonListClass,
2089
- children: options.map((value, i2) => {
2090
- return o$1("li", {
2091
- class: "flex-1",
2092
- children: o$1(BooleanOption, {
2093
- ref: i2 === 0 ? focusRef : null,
2094
- type: "submit",
2095
- name: FIELD_NAME,
2096
- value,
2097
- label: input.config.labels[value]
2098
- }, value)
2099
- });
2100
- })
2101
- }), input.config.optional && o$1("div", {
2102
- class: "px-2 pb-2",
2103
- children: o$1(SkipButton, {
2104
- class: "w-full",
2105
- type: "button",
2106
- onClick: () => onSubmitSuccess(null)
2107
- })
2108
- })]
2109
- });
2110
- };
2111
- const InputError = ({
2112
- error
2113
- }) => {
2114
- if (!error || !error.message)
2115
- return null;
2116
- return o$1("div", {
2117
- role: "alert",
2118
- class: "text-error-11 flex max-w-full items-center gap-1 overflow-hidden rounded-full px-2 py-2",
2119
- children: [o$1("svg", {
2120
- class: "text-error-9 h-4 w-4",
2121
- viewBox: "0 0 16 16",
2122
- fill: "none",
2123
- xmlns: "http://www.w3.org/2000/svg",
2124
- children: [o$1("circle", {
2125
- cx: "8",
2126
- cy: "8",
2127
- r: "6.3",
2128
- stroke: "currentColor",
2129
- "stroke-width": "1.4"
2130
- }), o$1("rect", {
2131
- x: "7",
2132
- y: "4",
2133
- width: "2",
2134
- height: "5",
2135
- fill: "currentColor"
2136
- }), o$1("rect", {
2137
- x: "7",
2138
- y: "10",
2139
- width: "2",
2140
- height: "2",
2141
- fill: "currentColor"
2142
- })]
2143
- }), o$1("p", {
2144
- class: "truncate pr-1 text-sm",
2145
- children: error.message
2146
- })]
2147
- });
2148
- };
2149
- const toBase64 = (file) => new Promise((resolve, reject) => {
2150
- const reader = new FileReader();
2151
- reader.readAsDataURL(file);
2152
- reader.onload = () => {
2153
- if (!reader.result)
2154
- return reject("No result from reader");
2155
- return resolve(reader.result.toString());
2156
- };
2157
- reader.onerror = reject;
2158
- });
2159
- const addFileSizesKb = (files) => files.reduce((acc, cur) => acc + cur.sizeKb, 0);
2160
- const isFileSubmission = isSubmissionOfType("file");
2161
- const FILENAMES_TO_SHOW_QTY = 3;
2162
- const FileThumbnail = ({
2163
- file,
2164
- class: className,
2165
- ...props
2166
- }) => {
2167
- const extension = file.name.split(".").pop();
2168
- const fileName = file.name.replace(new RegExp(`.${extension}$`), "");
2169
- return o$1("div", {
2170
- class: clsx("bg-accent-1 outline-accent-4 flex max-w-full gap-2 overflow-hidden rounded-lg px-3 py-2 text-sm outline", className),
2171
- ...props,
2172
- children: [o$1("p", {
2173
- "aria-label": "File name",
2174
- class: "text-accent-12 flex flex-grow overflow-hidden",
2175
- children: [o$1("span", {
2176
- class: "block truncate",
2177
- children: fileName
2178
- }), o$1("span", {
2179
- children: [".", extension]
2180
- })]
2181
- }), o$1("p", {
2182
- "aria-label": "File size",
2183
- class: "text-accent-11",
2184
- children: kbToReadableSize(file.sizeKb)
2185
- })]
2186
- });
2187
- };
2188
- const FilenameBadge = ({
2189
- class: className,
2190
- ...props
2191
- }) => o$1("li", {
2192
- class: clsx("outline-neutral-6 text-neutral-11 bg-neutral-1 block rounded-md px-1 py-0.5 text-xs outline outline-1", className),
2193
- ...props
2194
- });
2195
- const getFileExtension = (fileName) => {
2196
- const extension = fileName.split(".").pop();
2197
- if (!extension)
2198
- throw new Error("No file extension found");
2199
- return extension ? "." + extension : "";
2200
- };
2201
- const validateExtensions = ({
2202
- allowedExtensions,
2203
- files
2204
- }) => {
2205
- const normalisedExtensions = allowedExtensions.map((ext) => ext.toLowerCase());
2206
- return files.every((file) => normalisedExtensions.includes(getFileExtension(file.name).toLowerCase()));
2207
- };
2208
- const trimFileName = (fileName, maxLength2) => {
2209
- const extension = getFileExtension(fileName);
2210
- const trimmedName = fileName.replace(new RegExp(`${extension}$`), "").slice(0, maxLength2);
2211
- return `${trimmedName}${extension}`;
2212
- };
2213
- const ChatInputFile = ({
2214
- input,
2215
- onSubmitSuccess
2216
- }) => {
2217
- var _a;
2218
- const submission = (_a = store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key];
2219
- const [files, setFiles] = h(isFileSubmission(submission) ? submission.value : []);
2220
- const [error, setError] = h();
2221
- const hiddenFileCount = files.length - FILENAMES_TO_SHOW_QTY;
2222
- const totalSize = addFileSizesKb(files);
2223
- const focusRef = useFocusOnMount();
2224
- return o$1("form", {
2225
- class: "flex flex-col gap-1 p-2.5",
2226
- onSubmit: (e) => {
2227
- e.preventDefault();
2228
- setError(void 0);
2229
- if (files.length === 0) {
2230
- return setError({
2231
- type: "required",
2232
- message: "Please select a file"
2233
- });
2234
- }
2235
- if (input.config.extensions.length > 0 && !validateExtensions({
2236
- allowedExtensions: input.config.extensions,
2237
- files
2238
- })) {
2239
- return setError({
2240
- type: "validate",
2241
- message: `Please upload ${input.config.extensions.join(", ")} files only`
2242
- });
2243
- }
2244
- if (input.config.fileSizeLimitKib && totalSize > input.config.fileSizeLimitKib) {
2245
- return setError({
2246
- type: "max",
2247
- message: `File size exceeds limit of ${kbToReadableSize(input.config.fileSizeLimitKib)}`
2248
- });
2249
- }
2250
- if (input.config.allowMultiple === false && files.length > 1)
2251
- return setError({
2252
- type: "invalid",
2253
- message: "Only one file is allowed"
2254
- });
2255
- return onSubmitSuccess({
2256
- type: "file",
2257
- value: files
2258
- });
2259
- },
2260
- children: [o$1("div", {
2261
- class: "flex items-center gap-2",
2262
- children: [o$1("label", {
2263
- ref: focusRef,
2264
- for: "dropzone-file",
2265
- class: "border-neutral-8 bg-neutral-2 flex h-48 w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-2xl border border-dashed p-4",
2266
- children: [files.length > 0 ? o$1(k, {
2267
- children: [o$1("ul", {
2268
- class: "flex max-w-full flex-wrap justify-center gap-1 overflow-hidden p-1",
2269
- children: [files.slice(0, FILENAMES_TO_SHOW_QTY).map((file) => {
2270
- const extension = file.name.split(".").pop();
2271
- const fileName = file.name.replace(new RegExp(`.${extension}$`), "");
2272
- return o$1(FilenameBadge, {
2273
- class: "flex overflow-hidden",
2274
- children: [o$1("span", {
2275
- class: "block truncate",
2276
- children: fileName
2277
- }), o$1("span", {
2278
- children: [".", extension]
2279
- })]
2280
- });
2281
- }), hiddenFileCount > 0 ? o$1(FilenameBadge, {
2282
- children: ["+", hiddenFileCount, " file", hiddenFileCount !== 1 ? "s" : ""]
2283
- }) : null]
2284
- }), o$1("p", {
2285
- class: "text-neutral-11 text-xs",
2286
- children: [kbToReadableSize(totalSize), " ", files.length > 1 ? "total" : ""]
2287
- })]
2288
- }) : o$1("div", {
2289
- class: "flex flex-col justify-center gap-4 pb-6 pt-5",
2290
- children: [o$1("header", {
2291
- class: "flex flex-col items-center gap-0",
2292
- children: [o$1("svg", {
2293
- class: "text-neutral-11 mb-1 h-8 w-8",
2294
- "aria-hidden": "true",
2295
- xmlns: "http://www.w3.org/2000/svg",
2296
- fill: "none",
2297
- viewBox: "0 0 20 16",
2298
- children: o$1("path", {
2299
- stroke: "currentColor",
2300
- "stroke-linecap": "round",
2301
- "stroke-linejoin": "round",
2302
- "stroke-width": "1.5",
2303
- d: "M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
2304
- })
2305
- }), o$1("p", {
2306
- class: "text-neutral-12 tracking-[-0.01em]",
2307
- children: [input.config.allowMultiple ? "Select files" : "Select a file", " to upload"]
2308
- }), input.config.fileSizeLimitKib ? o$1("p", {
2309
- class: "text-neutral-10 text-xs",
2310
- children: ["(max ", kbToReadableSize(input.config.fileSizeLimitKib), ")"]
2311
- }) : null]
2312
- }), o$1("aside", {
2313
- class: "flex flex-col items-center gap-2",
2314
- children: [o$1("p", {
2315
- id: "accepted-filetypes",
2316
- class: "sr-only",
2317
- children: "Accepted file extensions"
2318
- }), o$1("ul", {
2319
- "aria-describedby": "accepted-filetypes",
2320
- class: "flex flex-wrap justify-center gap-2",
2321
- children: input.config.extensions.map((ext) => o$1("li", {
2322
- class: "ring-lowest outline-neutral-6 text-neutral-9 bg-neutral-1 rounded-md px-1 py-0.5 text-[11px] uppercase tracking-wide outline outline-1 ring-2",
2323
- children: ext.replace(".", "")
2324
- }))
2325
- })]
2326
- })]
2327
- }), o$1("input", {
2328
- id: "dropzone-file",
2329
- onInput: async (e) => {
2330
- invariant(e.target instanceof HTMLInputElement);
2331
- const files2 = e.target.files ? Array.from(e.target.files) : [];
2332
- const filesToUpload = await Promise.allSettled(files2.map(async (file) => {
2333
- const data = await toBase64(file);
2334
- return {
2335
- name: trimFileName(file.name, 42),
2336
- data,
2337
- sizeKb: file.size / 1e3
2338
- };
2339
- }));
2340
- if (filesToUpload.some(({
2341
- status
2342
- }) => status === "rejected")) {
2343
- return setError({
2344
- type: "invalid",
2345
- message: "Invalid file"
2346
- });
2347
- }
2348
- const validFiles = filesToUpload.map((promise) => promise.status === "fulfilled" ? promise.value : null).filter(Boolean);
2349
- setFiles(validFiles);
2350
- },
2351
- multiple: input.config.allowMultiple,
2352
- type: "file",
2353
- class: "sr-only"
2354
- })]
2355
- }), o$1("div", {
2356
- class: "flex h-full flex-col items-center gap-2",
2357
- children: [o$1(SendButton, {
2358
- disabled: files.length === 0
2359
- }), input.config.optional && o$1(SkipButton, {
2360
- onClick: () => onSubmitSuccess(null)
2361
- })]
2362
- })]
2363
- }), o$1(InputError, {
2364
- error
2365
- })]
2366
- });
2367
- };
2368
- var isCheckBoxInput = (element) => element.type === "checkbox";
2369
- var isDateObject = (value) => value instanceof Date;
2370
- var isNullOrUndefined = (value) => value == null;
2371
- const isObjectType = (value) => typeof value === "object";
2372
- var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
2373
- var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
2374
- var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
2375
- var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
2376
- var isPlainObject = (tempObject) => {
2377
- const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
2378
- return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
2379
- };
2380
- var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
2381
- function cloneObject(data) {
2382
- let copy;
2383
- const isArray = Array.isArray(data);
2384
- if (data instanceof Date) {
2385
- copy = new Date(data);
2386
- } else if (data instanceof Set) {
2387
- copy = new Set(data);
2388
- } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray || isObject(data))) {
2389
- copy = isArray ? [] : {};
2390
- if (!isArray && !isPlainObject(data)) {
2391
- copy = data;
2392
- } else {
2393
- for (const key in data) {
2394
- if (data.hasOwnProperty(key)) {
2395
- copy[key] = cloneObject(data[key]);
2396
- }
2397
- }
2398
- }
2399
- } else {
2400
- return data;
2401
- }
2402
- return copy;
2403
- }
2404
- var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
2405
- var isUndefined = (val) => val === void 0;
2406
- var get = (obj, path, defaultValue) => {
2407
- if (!path || !isObject(obj)) {
2408
- return defaultValue;
2409
- }
2410
- const result = compact(path.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], obj);
2411
- return isUndefined(result) || result === obj ? isUndefined(obj[path]) ? defaultValue : obj[path] : result;
2412
- };
2413
- var isBoolean = (value) => typeof value === "boolean";
2414
- const EVENTS = {
2415
- BLUR: "blur",
2416
- FOCUS_OUT: "focusout",
2417
- CHANGE: "change"
2418
- };
2419
- const VALIDATION_MODE = {
2420
- onBlur: "onBlur",
2421
- onChange: "onChange",
2422
- onSubmit: "onSubmit",
2423
- onTouched: "onTouched",
2424
- all: "all"
2425
- };
2426
- const INPUT_VALIDATION_RULES = {
2427
- max: "max",
2428
- min: "min",
2429
- maxLength: "maxLength",
2430
- minLength: "minLength",
2431
- pattern: "pattern",
2432
- required: "required",
2433
- validate: "validate"
2434
- };
2435
- Cn.createContext(null);
2436
- var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
2437
- const result = {
2438
- defaultValues: control._defaultValues
2439
- };
2440
- for (const key in formState) {
2441
- Object.defineProperty(result, key, {
2442
- get: () => {
2443
- const _key = key;
2444
- if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
2445
- control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
2446
- }
2447
- localProxyFormState && (localProxyFormState[_key] = true);
2448
- return formState[_key];
2449
- }
2450
- });
2451
- }
2452
- return result;
2453
- };
2454
- var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
2455
- var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
2456
- updateFormState(formStateData);
2457
- const { name, ...formState } = formStateData;
2458
- return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
2459
- };
2460
- var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
2461
- function useSubscribe(props) {
2462
- const _props = Cn.useRef(props);
2463
- _props.current = props;
2464
- Cn.useEffect(() => {
2465
- const subscription = !props.disabled && _props.current.subject && _props.current.subject.subscribe({
2466
- next: _props.current.next
2467
- });
2468
- return () => {
2469
- subscription && subscription.unsubscribe();
2470
- };
2471
- }, [props.disabled]);
2472
- }
2473
- var isString$1 = (value) => typeof value === "string";
2474
- var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
2475
- if (isString$1(names)) {
2476
- isGlobal && _names.watch.add(names);
2477
- return get(formValues, names, defaultValue);
2478
- }
2479
- if (Array.isArray(names)) {
2480
- return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
2481
- }
2482
- isGlobal && (_names.watchAll = true);
2483
- return formValues;
2484
- };
2485
- var isKey = (value) => /^\w*$/.test(value);
2486
- var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
2487
- function set(object2, path, value) {
2488
- let index = -1;
2489
- const tempPath = isKey(path) ? [path] : stringToPath(path);
2490
- const length = tempPath.length;
2491
- const lastIndex = length - 1;
2492
- while (++index < length) {
2493
- const key = tempPath[index];
2494
- let newValue = value;
2495
- if (index !== lastIndex) {
2496
- const objValue = object2[key];
2497
- newValue = isObject(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
2498
- }
2499
- object2[key] = newValue;
2500
- object2 = object2[key];
2501
- }
2502
- return object2;
2503
- }
2504
- var appendErrors = (name, validateAllFieldCriteria, errors2, type, message) => validateAllFieldCriteria ? {
2505
- ...errors2[name],
2506
- types: {
2507
- ...errors2[name] && errors2[name].types ? errors2[name].types : {},
2508
- [type]: message || true
2509
- }
2510
- } : {};
2511
- var getValidationModes = (mode) => ({
2512
- isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
2513
- isOnBlur: mode === VALIDATION_MODE.onBlur,
2514
- isOnChange: mode === VALIDATION_MODE.onChange,
2515
- isOnAll: mode === VALIDATION_MODE.all,
2516
- isOnTouch: mode === VALIDATION_MODE.onTouched
2517
- });
2518
- var isWatched = (name, _names, isBlurEvent) => !isBlurEvent && (_names.watchAll || _names.watch.has(name) || [..._names.watch].some((watchName) => name.startsWith(watchName) && /^\.\w+/.test(name.slice(watchName.length))));
2519
- const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
2520
- for (const key of fieldsNames || Object.keys(fields)) {
2521
- const field = get(fields, key);
2522
- if (field) {
2523
- const { _f, ...currentField } = field;
2524
- if (_f) {
2525
- if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
2526
- break;
2527
- } else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
2528
- break;
2529
- }
2530
- } else if (isObject(currentField)) {
2531
- iterateFieldsByAction(currentField, action);
2532
- }
2533
- }
2534
- }
2535
- };
2536
- var updateFieldArrayRootError = (errors2, error, name) => {
2537
- const fieldArrayErrors = compact(get(errors2, name));
2538
- set(fieldArrayErrors, "root", error[name]);
2539
- set(errors2, name, fieldArrayErrors);
2540
- return errors2;
2541
- };
2542
- var isFileInput = (element) => element.type === "file";
2543
- var isFunction = (value) => typeof value === "function";
2544
- var isHTMLElement = (value) => {
2545
- if (!isWeb) {
2546
- return false;
2547
- }
2548
- const owner = value ? value.ownerDocument : 0;
2549
- return value instanceof (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement);
2550
- };
2551
- var isMessage = (value) => isString$1(value);
2552
- var isRadioInput = (element) => element.type === "radio";
2553
- var isRegex = (value) => value instanceof RegExp;
2554
- const defaultResult = {
2555
- value: false,
2556
- isValid: false
2557
- };
2558
- const validResult = { value: true, isValid: true };
2559
- var getCheckboxValue = (options2) => {
2560
- if (Array.isArray(options2)) {
2561
- if (options2.length > 1) {
2562
- const values = options2.filter((option) => option && option.checked && !option.disabled).map((option) => option.value);
2563
- return { value: values, isValid: !!values.length };
2564
- }
2565
- return options2[0].checked && !options2[0].disabled ? (
2566
- // @ts-expect-error expected to work in the browser
2567
- options2[0].attributes && !isUndefined(options2[0].attributes.value) ? isUndefined(options2[0].value) || options2[0].value === "" ? validResult : { value: options2[0].value, isValid: true } : validResult
2568
- ) : defaultResult;
2569
- }
2570
- return defaultResult;
2571
- };
2572
- const defaultReturn = {
2573
- isValid: false,
2574
- value: null
2575
- };
2576
- var getRadioValue = (options2) => Array.isArray(options2) ? options2.reduce((previous, option) => option && option.checked && !option.disabled ? {
2577
- isValid: true,
2578
- value: option.value
2579
- } : previous, defaultReturn) : defaultReturn;
2580
- function getValidateError(result, ref, type = "validate") {
2581
- if (isMessage(result) || Array.isArray(result) && result.every(isMessage) || isBoolean(result) && !result) {
2582
- return {
2583
- type,
2584
- message: isMessage(result) ? result : "",
2585
- ref
2586
- };
2587
- }
2588
- }
2589
- var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData) ? validationData : {
2590
- value: validationData,
2591
- message: ""
2592
- };
2593
- var validateField = async (field, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
2594
- const { ref, refs, required, maxLength: maxLength2, minLength: minLength2, min, max, pattern, validate, name, valueAsNumber, mount, disabled } = field._f;
2595
- const inputValue = get(formValues, name);
2596
- if (!mount || disabled) {
2597
- return {};
2598
- }
2599
- const inputRef = refs ? refs[0] : ref;
2600
- const setCustomValidity = (message) => {
2601
- if (shouldUseNativeValidation && inputRef.reportValidity) {
2602
- inputRef.setCustomValidity(isBoolean(message) ? "" : message || "");
2603
- inputRef.reportValidity();
2604
- }
2605
- };
2606
- const error = {};
2607
- const isRadio = isRadioInput(ref);
2608
- const isCheckBox = isCheckBoxInput(ref);
2609
- const isRadioOrCheckbox2 = isRadio || isCheckBox;
2610
- const isEmpty = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
2611
- const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
2612
- const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
2613
- const message = exceedMax ? maxLengthMessage : minLengthMessage;
2614
- error[name] = {
2615
- type: exceedMax ? maxType : minType,
2616
- message,
2617
- ref,
2618
- ...appendErrorsCurry(exceedMax ? maxType : minType, message)
2619
- };
2620
- };
2621
- if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required && (!isRadioOrCheckbox2 && (isEmpty || isNullOrUndefined(inputValue)) || isBoolean(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
2622
- const { value, message } = isMessage(required) ? { value: !!required, message: required } : getValueAndMessage(required);
2623
- if (value) {
2624
- error[name] = {
2625
- type: INPUT_VALIDATION_RULES.required,
2626
- message,
2627
- ref: inputRef,
2628
- ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message)
2629
- };
2630
- if (!validateAllFieldCriteria) {
2631
- setCustomValidity(message);
2632
- return error;
2633
- }
2634
- }
2635
- }
2636
- if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
2637
- let exceedMax;
2638
- let exceedMin;
2639
- const maxOutput = getValueAndMessage(max);
2640
- const minOutput = getValueAndMessage(min);
2641
- if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
2642
- const valueNumber = ref.valueAsNumber || (inputValue ? +inputValue : inputValue);
2643
- if (!isNullOrUndefined(maxOutput.value)) {
2644
- exceedMax = valueNumber > maxOutput.value;
2645
- }
2646
- if (!isNullOrUndefined(minOutput.value)) {
2647
- exceedMin = valueNumber < minOutput.value;
2648
- }
2649
- } else {
2650
- const valueDate = ref.valueAsDate || new Date(inputValue);
2651
- const convertTimeToDate = (time) => /* @__PURE__ */ new Date((/* @__PURE__ */ new Date()).toDateString() + " " + time);
2652
- const isTime = ref.type == "time";
2653
- const isWeek = ref.type == "week";
2654
- if (isString$1(maxOutput.value) && inputValue) {
2655
- exceedMax = isTime ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value) : isWeek ? inputValue > maxOutput.value : valueDate > new Date(maxOutput.value);
2656
- }
2657
- if (isString$1(minOutput.value) && inputValue) {
2658
- exceedMin = isTime ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value) : isWeek ? inputValue < minOutput.value : valueDate < new Date(minOutput.value);
2659
- }
2660
- }
2661
- if (exceedMax || exceedMin) {
2662
- getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
2663
- if (!validateAllFieldCriteria) {
2664
- setCustomValidity(error[name].message);
2665
- return error;
2666
- }
2667
- }
2668
- }
2669
- if ((maxLength2 || minLength2) && !isEmpty && (isString$1(inputValue) || isFieldArray && Array.isArray(inputValue))) {
2670
- const maxLengthOutput = getValueAndMessage(maxLength2);
2671
- const minLengthOutput = getValueAndMessage(minLength2);
2672
- const exceedMax = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
2673
- const exceedMin = !isNullOrUndefined(minLengthOutput.value) && inputValue.length < +minLengthOutput.value;
2674
- if (exceedMax || exceedMin) {
2675
- getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
2676
- if (!validateAllFieldCriteria) {
2677
- setCustomValidity(error[name].message);
2678
- return error;
2679
- }
2680
- }
2681
- }
2682
- if (pattern && !isEmpty && isString$1(inputValue)) {
2683
- const { value: patternValue, message } = getValueAndMessage(pattern);
2684
- if (isRegex(patternValue) && !inputValue.match(patternValue)) {
2685
- error[name] = {
2686
- type: INPUT_VALIDATION_RULES.pattern,
2687
- message,
2688
- ref,
2689
- ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message)
2690
- };
2691
- if (!validateAllFieldCriteria) {
2692
- setCustomValidity(message);
2693
- return error;
2694
- }
2695
- }
2696
- }
2697
- if (validate) {
2698
- if (isFunction(validate)) {
2699
- const result = await validate(inputValue, formValues);
2700
- const validateError = getValidateError(result, inputRef);
2701
- if (validateError) {
2702
- error[name] = {
2703
- ...validateError,
2704
- ...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message)
2705
- };
2706
- if (!validateAllFieldCriteria) {
2707
- setCustomValidity(validateError.message);
2708
- return error;
2709
- }
2710
- }
2711
- } else if (isObject(validate)) {
2712
- let validationResult = {};
2713
- for (const key in validate) {
2714
- if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
2715
- break;
2716
- }
2717
- const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
2718
- if (validateError) {
2719
- validationResult = {
2720
- ...validateError,
2721
- ...appendErrorsCurry(key, validateError.message)
2722
- };
2723
- setCustomValidity(validateError.message);
2724
- if (validateAllFieldCriteria) {
2725
- error[name] = validationResult;
2726
- }
2727
- }
2728
- }
2729
- if (!isEmptyObject(validationResult)) {
2730
- error[name] = {
2731
- ref: inputRef,
2732
- ...validationResult
2733
- };
2734
- if (!validateAllFieldCriteria) {
2735
- return error;
2736
- }
2737
- }
2738
- }
2739
- }
2740
- setCustomValidity(true);
2741
- return error;
2742
- };
2743
- function baseGet(object2, updatePath) {
2744
- const length = updatePath.slice(0, -1).length;
2745
- let index = 0;
2746
- while (index < length) {
2747
- object2 = isUndefined(object2) ? index++ : object2[updatePath[index++]];
2748
- }
2749
- return object2;
2750
- }
2751
- function isEmptyArray(obj) {
2752
- for (const key in obj) {
2753
- if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
2754
- return false;
2755
- }
2756
- }
2757
- return true;
2758
- }
2759
- function unset(object2, path) {
2760
- const paths = Array.isArray(path) ? path : isKey(path) ? [path] : stringToPath(path);
2761
- const childObject = paths.length === 1 ? object2 : baseGet(object2, paths);
2762
- const index = paths.length - 1;
2763
- const key = paths[index];
2764
- if (childObject) {
2765
- delete childObject[key];
2766
- }
2767
- if (index !== 0 && (isObject(childObject) && isEmptyObject(childObject) || Array.isArray(childObject) && isEmptyArray(childObject))) {
2768
- unset(object2, paths.slice(0, -1));
2769
- }
2770
- return object2;
2771
- }
2772
- function createSubject() {
2773
- let _observers = [];
2774
- const next = (value) => {
2775
- for (const observer of _observers) {
2776
- observer.next && observer.next(value);
2777
- }
2778
- };
2779
- const subscribe = (observer) => {
2780
- _observers.push(observer);
2781
- return {
2782
- unsubscribe: () => {
2783
- _observers = _observers.filter((o2) => o2 !== observer);
2784
- }
2785
- };
2786
- };
2787
- const unsubscribe = () => {
2788
- _observers = [];
2789
- };
2790
- return {
2791
- get observers() {
2792
- return _observers;
2793
- },
2794
- next,
2795
- subscribe,
2796
- unsubscribe
2797
- };
2798
- }
2799
- var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
2800
- function deepEqual(object1, object2) {
2801
- if (isPrimitive(object1) || isPrimitive(object2)) {
2802
- return object1 === object2;
2803
- }
2804
- if (isDateObject(object1) && isDateObject(object2)) {
2805
- return object1.getTime() === object2.getTime();
2806
- }
2807
- const keys1 = Object.keys(object1);
2808
- const keys2 = Object.keys(object2);
2809
- if (keys1.length !== keys2.length) {
2810
- return false;
2811
- }
2812
- for (const key of keys1) {
2813
- const val1 = object1[key];
2814
- if (!keys2.includes(key)) {
2815
- return false;
2816
- }
2817
- if (key !== "ref") {
2818
- const val2 = object2[key];
2819
- if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2) : val1 !== val2) {
2820
- return false;
2821
- }
2822
- }
2823
- }
2824
- return true;
2825
- }
2826
- var isMultipleSelect = (element) => element.type === `select-multiple`;
2827
- var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
2828
- var live = (ref) => isHTMLElement(ref) && ref.isConnected;
2829
- var objectHasFunction = (data) => {
2830
- for (const key in data) {
2831
- if (isFunction(data[key])) {
2832
- return true;
2833
- }
2834
- }
2835
- return false;
2836
- };
2837
- function markFieldsDirty(data, fields = {}) {
2838
- const isParentNodeArray = Array.isArray(data);
2839
- if (isObject(data) || isParentNodeArray) {
2840
- for (const key in data) {
2841
- if (Array.isArray(data[key]) || isObject(data[key]) && !objectHasFunction(data[key])) {
2842
- fields[key] = Array.isArray(data[key]) ? [] : {};
2843
- markFieldsDirty(data[key], fields[key]);
2844
- } else if (!isNullOrUndefined(data[key])) {
2845
- fields[key] = true;
2846
- }
2847
- }
2848
- }
2849
- return fields;
2850
- }
2851
- function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues) {
2852
- const isParentNodeArray = Array.isArray(data);
2853
- if (isObject(data) || isParentNodeArray) {
2854
- for (const key in data) {
2855
- if (Array.isArray(data[key]) || isObject(data[key]) && !objectHasFunction(data[key])) {
2856
- if (isUndefined(formValues) || isPrimitive(dirtyFieldsFromValues[key])) {
2857
- dirtyFieldsFromValues[key] = Array.isArray(data[key]) ? markFieldsDirty(data[key], []) : { ...markFieldsDirty(data[key]) };
2858
- } else {
2859
- getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
2860
- }
2861
- } else {
2862
- dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
2863
- }
2864
- }
2865
- }
2866
- return dirtyFieldsFromValues;
2867
- }
2868
- var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
2869
- var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value) ? value : valueAsNumber ? value === "" ? NaN : value ? +value : value : valueAsDate && isString$1(value) ? new Date(value) : setValueAs ? setValueAs(value) : value;
2870
- function getFieldValue(_f) {
2871
- const ref = _f.ref;
2872
- if (_f.refs ? _f.refs.every((ref2) => ref2.disabled) : ref.disabled) {
2873
- return;
2874
- }
2875
- if (isFileInput(ref)) {
2876
- return ref.files;
2877
- }
2878
- if (isRadioInput(ref)) {
2879
- return getRadioValue(_f.refs).value;
2880
- }
2881
- if (isMultipleSelect(ref)) {
2882
- return [...ref.selectedOptions].map(({ value }) => value);
2883
- }
2884
- if (isCheckBoxInput(ref)) {
2885
- return getCheckboxValue(_f.refs).value;
2886
- }
2887
- return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
2888
- }
2889
- var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
2890
- const fields = {};
2891
- for (const name of fieldsNames) {
2892
- const field = get(_fields, name);
2893
- field && set(fields, name, field._f);
2894
- }
2895
- return {
2896
- criteriaMode,
2897
- names: [...fieldsNames],
2898
- fields,
2899
- shouldUseNativeValidation
2900
- };
2901
- };
2902
- var getRuleValue = (rule) => isUndefined(rule) ? rule : isRegex(rule) ? rule.source : isObject(rule) ? isRegex(rule.value) ? rule.value.source : rule.value : rule;
2903
- var hasValidation = (options2) => options2.mount && (options2.required || options2.min || options2.max || options2.maxLength || options2.minLength || options2.pattern || options2.validate);
2904
- function schemaErrorLookup(errors2, _fields, name) {
2905
- const error = get(errors2, name);
2906
- if (error || isKey(name)) {
2907
- return {
2908
- error,
2909
- name
2910
- };
2911
- }
2912
- const names = name.split(".");
2913
- while (names.length) {
2914
- const fieldName = names.join(".");
2915
- const field = get(_fields, fieldName);
2916
- const foundError = get(errors2, fieldName);
2917
- if (field && !Array.isArray(field) && name !== fieldName) {
2918
- return { name };
2919
- }
2920
- if (foundError && foundError.type) {
2921
- return {
2922
- name: fieldName,
2923
- error: foundError
2924
- };
2925
- }
2926
- names.pop();
2927
- }
2928
- return {
2929
- name
2930
- };
2931
- }
2932
- var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
2933
- if (mode.isOnAll) {
2934
- return false;
2935
- } else if (!isSubmitted && mode.isOnTouch) {
2936
- return !(isTouched || isBlurEvent);
2937
- } else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
2938
- return !isBlurEvent;
2939
- } else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
2940
- return isBlurEvent;
2941
- }
2942
- return true;
2943
- };
2944
- var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
2945
- const defaultOptions = {
2946
- mode: VALIDATION_MODE.onSubmit,
2947
- reValidateMode: VALIDATION_MODE.onChange,
2948
- shouldFocusError: true
2949
- };
2950
- function createFormControl(props = {}, flushRootRender) {
2951
- let _options = {
2952
- ...defaultOptions,
2953
- ...props
2954
- };
2955
- let _formState = {
2956
- submitCount: 0,
2957
- isDirty: false,
2958
- isLoading: isFunction(_options.defaultValues),
2959
- isValidating: false,
2960
- isSubmitted: false,
2961
- isSubmitting: false,
2962
- isSubmitSuccessful: false,
2963
- isValid: false,
2964
- touchedFields: {},
2965
- dirtyFields: {},
2966
- errors: {},
2967
- disabled: false
2968
- };
2969
- let _fields = {};
2970
- let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values) ? cloneObject(_options.defaultValues || _options.values) || {} : {};
2971
- let _formValues = _options.shouldUnregister ? {} : cloneObject(_defaultValues);
2972
- let _state = {
2973
- action: false,
2974
- mount: false,
2975
- watch: false
2976
- };
2977
- let _names = {
2978
- mount: /* @__PURE__ */ new Set(),
2979
- unMount: /* @__PURE__ */ new Set(),
2980
- array: /* @__PURE__ */ new Set(),
2981
- watch: /* @__PURE__ */ new Set()
2982
- };
2983
- let delayErrorCallback;
2984
- let timer = 0;
2985
- const _proxyFormState = {
2986
- isDirty: false,
2987
- dirtyFields: false,
2988
- touchedFields: false,
2989
- isValidating: false,
2990
- isValid: false,
2991
- errors: false
2992
- };
2993
- const _subjects = {
2994
- values: createSubject(),
2995
- array: createSubject(),
2996
- state: createSubject()
2997
- };
2998
- const shouldCaptureDirtyFields = props.resetOptions && props.resetOptions.keepDirtyValues;
2999
- const validationModeBeforeSubmit = getValidationModes(_options.mode);
3000
- const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
3001
- const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
3002
- const debounce2 = (callback) => (wait) => {
3003
- clearTimeout(timer);
3004
- timer = setTimeout(callback, wait);
3005
- };
3006
- const _updateValid = async (shouldUpdateValid) => {
3007
- if (_proxyFormState.isValid || shouldUpdateValid) {
3008
- const isValid = _options.resolver ? isEmptyObject((await _executeSchema()).errors) : await executeBuiltInValidation(_fields, true);
3009
- if (isValid !== _formState.isValid) {
3010
- _subjects.state.next({
3011
- isValid
3012
- });
3013
- }
3014
- }
3015
- };
3016
- const _updateIsValidating = (value) => _proxyFormState.isValidating && _subjects.state.next({
3017
- isValidating: value
3018
- });
3019
- const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
3020
- if (args && method) {
3021
- _state.action = true;
3022
- if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
3023
- const fieldValues = method(get(_fields, name), args.argA, args.argB);
3024
- shouldSetValues && set(_fields, name, fieldValues);
3025
- }
3026
- if (shouldUpdateFieldsAndState && Array.isArray(get(_formState.errors, name))) {
3027
- const errors2 = method(get(_formState.errors, name), args.argA, args.argB);
3028
- shouldSetValues && set(_formState.errors, name, errors2);
3029
- unsetEmptyArray(_formState.errors, name);
3030
- }
3031
- if (_proxyFormState.touchedFields && shouldUpdateFieldsAndState && Array.isArray(get(_formState.touchedFields, name))) {
3032
- const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
3033
- shouldSetValues && set(_formState.touchedFields, name, touchedFields);
3034
- }
3035
- if (_proxyFormState.dirtyFields) {
3036
- _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
3037
- }
3038
- _subjects.state.next({
3039
- name,
3040
- isDirty: _getDirty(name, values),
3041
- dirtyFields: _formState.dirtyFields,
3042
- errors: _formState.errors,
3043
- isValid: _formState.isValid
3044
- });
3045
- } else {
3046
- set(_formValues, name, values);
3047
- }
3048
- };
3049
- const updateErrors = (name, error) => {
3050
- set(_formState.errors, name, error);
3051
- _subjects.state.next({
3052
- errors: _formState.errors
3053
- });
3054
- };
3055
- const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
3056
- const field = get(_fields, name);
3057
- if (field) {
3058
- const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
3059
- isUndefined(defaultValue) || ref && ref.defaultChecked || shouldSkipSetValueAs ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f)) : setFieldValue(name, defaultValue);
3060
- _state.mount && _updateValid();
3061
- }
3062
- };
3063
- const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
3064
- let shouldUpdateField = false;
3065
- let isPreviousDirty = false;
3066
- const output = {
3067
- name
3068
- };
3069
- if (!isBlurEvent || shouldDirty) {
3070
- if (_proxyFormState.isDirty) {
3071
- isPreviousDirty = _formState.isDirty;
3072
- _formState.isDirty = output.isDirty = _getDirty();
3073
- shouldUpdateField = isPreviousDirty !== output.isDirty;
3074
- }
3075
- const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
3076
- isPreviousDirty = get(_formState.dirtyFields, name);
3077
- isCurrentFieldPristine ? unset(_formState.dirtyFields, name) : set(_formState.dirtyFields, name, true);
3078
- output.dirtyFields = _formState.dirtyFields;
3079
- shouldUpdateField = shouldUpdateField || _proxyFormState.dirtyFields && isPreviousDirty !== !isCurrentFieldPristine;
3080
- }
3081
- if (isBlurEvent) {
3082
- const isPreviousFieldTouched = get(_formState.touchedFields, name);
3083
- if (!isPreviousFieldTouched) {
3084
- set(_formState.touchedFields, name, isBlurEvent);
3085
- output.touchedFields = _formState.touchedFields;
3086
- shouldUpdateField = shouldUpdateField || _proxyFormState.touchedFields && isPreviousFieldTouched !== isBlurEvent;
3087
- }
3088
- }
3089
- shouldUpdateField && shouldRender && _subjects.state.next(output);
3090
- return shouldUpdateField ? output : {};
3091
- };
3092
- const shouldRenderByError = (name, isValid, error, fieldState) => {
3093
- const previousFieldError = get(_formState.errors, name);
3094
- const shouldUpdateValid = _proxyFormState.isValid && isBoolean(isValid) && _formState.isValid !== isValid;
3095
- if (props.delayError && error) {
3096
- delayErrorCallback = debounce2(() => updateErrors(name, error));
3097
- delayErrorCallback(props.delayError);
3098
- } else {
3099
- clearTimeout(timer);
3100
- delayErrorCallback = null;
3101
- error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
3102
- }
3103
- if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) || !isEmptyObject(fieldState) || shouldUpdateValid) {
3104
- const updatedFormState = {
3105
- ...fieldState,
3106
- ...shouldUpdateValid && isBoolean(isValid) ? { isValid } : {},
3107
- errors: _formState.errors,
3108
- name
3109
- };
3110
- _formState = {
3111
- ..._formState,
3112
- ...updatedFormState
3113
- };
3114
- _subjects.state.next(updatedFormState);
3115
- }
3116
- _updateIsValidating(false);
3117
- };
3118
- const _executeSchema = async (name) => _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
3119
- const executeSchemaAndUpdateState = async (names) => {
3120
- const { errors: errors2 } = await _executeSchema(names);
3121
- if (names) {
3122
- for (const name of names) {
3123
- const error = get(errors2, name);
3124
- error ? set(_formState.errors, name, error) : unset(_formState.errors, name);
3125
- }
3126
- } else {
3127
- _formState.errors = errors2;
3128
- }
3129
- return errors2;
3130
- };
3131
- const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
3132
- valid: true
3133
- }) => {
3134
- for (const name in fields) {
3135
- const field = fields[name];
3136
- if (field) {
3137
- const { _f, ...fieldValue } = field;
3138
- if (_f) {
3139
- const isFieldArrayRoot = _names.array.has(_f.name);
3140
- const fieldError = await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
3141
- if (fieldError[_f.name]) {
3142
- context.valid = false;
3143
- if (shouldOnlyCheckValid) {
3144
- break;
3145
- }
3146
- }
3147
- !shouldOnlyCheckValid && (get(fieldError, _f.name) ? isFieldArrayRoot ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name) : set(_formState.errors, _f.name, fieldError[_f.name]) : unset(_formState.errors, _f.name));
3148
- }
3149
- fieldValue && await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context);
3150
- }
3151
- }
3152
- return context.valid;
3153
- };
3154
- const _removeUnmounted = () => {
3155
- for (const name of _names.unMount) {
3156
- const field = get(_fields, name);
3157
- field && (field._f.refs ? field._f.refs.every((ref) => !live(ref)) : !live(field._f.ref)) && unregister(name);
3158
- }
3159
- _names.unMount = /* @__PURE__ */ new Set();
3160
- };
3161
- const _getDirty = (name, data) => (name && data && set(_formValues, name, data), !deepEqual(getValues(), _defaultValues));
3162
- const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
3163
- ..._state.mount ? _formValues : isUndefined(defaultValue) ? _defaultValues : isString$1(names) ? { [names]: defaultValue } : defaultValue
3164
- }, isGlobal, defaultValue);
3165
- const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get(_defaultValues, name, []) : []));
3166
- const setFieldValue = (name, value, options2 = {}) => {
3167
- const field = get(_fields, name);
3168
- let fieldValue = value;
3169
- if (field) {
3170
- const fieldReference = field._f;
3171
- if (fieldReference) {
3172
- !fieldReference.disabled && set(_formValues, name, getFieldValueAs(value, fieldReference));
3173
- fieldValue = isHTMLElement(fieldReference.ref) && isNullOrUndefined(value) ? "" : value;
3174
- if (isMultipleSelect(fieldReference.ref)) {
3175
- [...fieldReference.ref.options].forEach((optionRef) => optionRef.selected = fieldValue.includes(optionRef.value));
3176
- } else if (fieldReference.refs) {
3177
- if (isCheckBoxInput(fieldReference.ref)) {
3178
- fieldReference.refs.length > 1 ? fieldReference.refs.forEach((checkboxRef) => (!checkboxRef.defaultChecked || !checkboxRef.disabled) && (checkboxRef.checked = Array.isArray(fieldValue) ? !!fieldValue.find((data) => data === checkboxRef.value) : fieldValue === checkboxRef.value)) : fieldReference.refs[0] && (fieldReference.refs[0].checked = !!fieldValue);
3179
- } else {
3180
- fieldReference.refs.forEach((radioRef) => radioRef.checked = radioRef.value === fieldValue);
3181
- }
3182
- } else if (isFileInput(fieldReference.ref)) {
3183
- fieldReference.ref.value = "";
3184
- } else {
3185
- fieldReference.ref.value = fieldValue;
3186
- if (!fieldReference.ref.type) {
3187
- _subjects.values.next({
3188
- name,
3189
- values: { ..._formValues }
3190
- });
3191
- }
3192
- }
3193
- }
3194
- }
3195
- (options2.shouldDirty || options2.shouldTouch) && updateTouchAndDirty(name, fieldValue, options2.shouldTouch, options2.shouldDirty, true);
3196
- options2.shouldValidate && trigger(name);
3197
- };
3198
- const setValues = (name, value, options2) => {
3199
- for (const fieldKey in value) {
3200
- const fieldValue = value[fieldKey];
3201
- const fieldName = `${name}.${fieldKey}`;
3202
- const field = get(_fields, fieldName);
3203
- (_names.array.has(name) || !isPrimitive(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options2) : setFieldValue(fieldName, fieldValue, options2);
3204
- }
3205
- };
3206
- const setValue = (name, value, options2 = {}) => {
3207
- const field = get(_fields, name);
3208
- const isFieldArray = _names.array.has(name);
3209
- const cloneValue = cloneObject(value);
3210
- set(_formValues, name, cloneValue);
3211
- if (isFieldArray) {
3212
- _subjects.array.next({
3213
- name,
3214
- values: { ..._formValues }
3215
- });
3216
- if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) && options2.shouldDirty) {
3217
- _subjects.state.next({
3218
- name,
3219
- dirtyFields: getDirtyFields(_defaultValues, _formValues),
3220
- isDirty: _getDirty(name, cloneValue)
3221
- });
3222
- }
3223
- } else {
3224
- field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options2) : setFieldValue(name, cloneValue, options2);
3225
- }
3226
- isWatched(name, _names) && _subjects.state.next({ ..._formState });
3227
- _subjects.values.next({
3228
- name,
3229
- values: { ..._formValues }
3230
- });
3231
- !_state.mount && flushRootRender();
3232
- };
3233
- const onChange = async (event) => {
3234
- const target = event.target;
3235
- let name = target.name;
3236
- let isFieldValueUpdated = true;
3237
- const field = get(_fields, name);
3238
- const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
3239
- const _updateIsFieldValueUpdated = (fieldValue) => {
3240
- isFieldValueUpdated = Number.isNaN(fieldValue) || fieldValue === get(_formValues, name, fieldValue);
3241
- };
3242
- if (field) {
3243
- let error;
3244
- let isValid;
3245
- const fieldValue = getCurrentFieldValue();
3246
- const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
3247
- const shouldSkipValidation = !hasValidation(field._f) && !_options.resolver && !get(_formState.errors, name) && !field._f.deps || skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
3248
- const watched = isWatched(name, _names, isBlurEvent);
3249
- set(_formValues, name, fieldValue);
3250
- if (isBlurEvent) {
3251
- field._f.onBlur && field._f.onBlur(event);
3252
- delayErrorCallback && delayErrorCallback(0);
3253
- } else if (field._f.onChange) {
3254
- field._f.onChange(event);
3255
- }
3256
- const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
3257
- const shouldRender = !isEmptyObject(fieldState) || watched;
3258
- !isBlurEvent && _subjects.values.next({
3259
- name,
3260
- type: event.type,
3261
- values: { ..._formValues }
3262
- });
3263
- if (shouldSkipValidation) {
3264
- _proxyFormState.isValid && _updateValid();
3265
- return shouldRender && _subjects.state.next({ name, ...watched ? {} : fieldState });
3266
- }
3267
- !isBlurEvent && watched && _subjects.state.next({ ..._formState });
3268
- _updateIsValidating(true);
3269
- if (_options.resolver) {
3270
- const { errors: errors2 } = await _executeSchema([name]);
3271
- _updateIsFieldValueUpdated(fieldValue);
3272
- if (isFieldValueUpdated) {
3273
- const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
3274
- const errorLookupResult = schemaErrorLookup(errors2, _fields, previousErrorLookupResult.name || name);
3275
- error = errorLookupResult.error;
3276
- name = errorLookupResult.name;
3277
- isValid = isEmptyObject(errors2);
3278
- }
3279
- } else {
3280
- error = (await validateField(field, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
3281
- _updateIsFieldValueUpdated(fieldValue);
3282
- if (isFieldValueUpdated) {
3283
- if (error) {
3284
- isValid = false;
3285
- } else if (_proxyFormState.isValid) {
3286
- isValid = await executeBuiltInValidation(_fields, true);
3287
- }
3288
- }
3289
- }
3290
- if (isFieldValueUpdated) {
3291
- field._f.deps && trigger(field._f.deps);
3292
- shouldRenderByError(name, isValid, error, fieldState);
3293
- }
3294
- }
3295
- };
3296
- const _focusInput = (ref, key) => {
3297
- if (get(_formState.errors, key) && ref.focus) {
3298
- ref.focus();
3299
- return 1;
3300
- }
3301
- return;
3302
- };
3303
- const trigger = async (name, options2 = {}) => {
3304
- let isValid;
3305
- let validationResult;
3306
- const fieldNames = convertToArrayPayload(name);
3307
- _updateIsValidating(true);
3308
- if (_options.resolver) {
3309
- const errors2 = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
3310
- isValid = isEmptyObject(errors2);
3311
- validationResult = name ? !fieldNames.some((name2) => get(errors2, name2)) : isValid;
3312
- } else if (name) {
3313
- validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
3314
- const field = get(_fields, fieldName);
3315
- return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
3316
- }))).every(Boolean);
3317
- !(!validationResult && !_formState.isValid) && _updateValid();
3318
- } else {
3319
- validationResult = isValid = await executeBuiltInValidation(_fields);
3320
- }
3321
- _subjects.state.next({
3322
- ...!isString$1(name) || _proxyFormState.isValid && isValid !== _formState.isValid ? {} : { name },
3323
- ..._options.resolver || !name ? { isValid } : {},
3324
- errors: _formState.errors,
3325
- isValidating: false
3326
- });
3327
- options2.shouldFocus && !validationResult && iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
3328
- return validationResult;
3329
- };
3330
- const getValues = (fieldNames) => {
3331
- const values = {
3332
- ..._defaultValues,
3333
- ..._state.mount ? _formValues : {}
3334
- };
3335
- return isUndefined(fieldNames) ? values : isString$1(fieldNames) ? get(values, fieldNames) : fieldNames.map((name) => get(values, name));
3336
- };
3337
- const getFieldState = (name, formState) => ({
3338
- invalid: !!get((formState || _formState).errors, name),
3339
- isDirty: !!get((formState || _formState).dirtyFields, name),
3340
- isTouched: !!get((formState || _formState).touchedFields, name),
3341
- error: get((formState || _formState).errors, name)
3342
- });
3343
- const clearErrors = (name) => {
3344
- name && convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
3345
- _subjects.state.next({
3346
- errors: name ? _formState.errors : {}
3347
- });
3348
- };
3349
- const setError = (name, error, options2) => {
3350
- const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
3351
- set(_formState.errors, name, {
3352
- ...error,
3353
- ref
3354
- });
3355
- _subjects.state.next({
3356
- name,
3357
- errors: _formState.errors,
3358
- isValid: false
3359
- });
3360
- options2 && options2.shouldFocus && ref && ref.focus && ref.focus();
3361
- };
3362
- const watch = (name, defaultValue) => isFunction(name) ? _subjects.values.subscribe({
3363
- next: (payload) => name(_getWatch(void 0, defaultValue), payload)
3364
- }) : _getWatch(name, defaultValue, true);
3365
- const unregister = (name, options2 = {}) => {
3366
- for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
3367
- _names.mount.delete(fieldName);
3368
- _names.array.delete(fieldName);
3369
- if (!options2.keepValue) {
3370
- unset(_fields, fieldName);
3371
- unset(_formValues, fieldName);
3372
- }
3373
- !options2.keepError && unset(_formState.errors, fieldName);
3374
- !options2.keepDirty && unset(_formState.dirtyFields, fieldName);
3375
- !options2.keepTouched && unset(_formState.touchedFields, fieldName);
3376
- !_options.shouldUnregister && !options2.keepDefaultValue && unset(_defaultValues, fieldName);
3377
- }
3378
- _subjects.values.next({
3379
- values: { ..._formValues }
3380
- });
3381
- _subjects.state.next({
3382
- ..._formState,
3383
- ...!options2.keepDirty ? {} : { isDirty: _getDirty() }
3384
- });
3385
- !options2.keepIsValid && _updateValid();
3386
- };
3387
- const _updateDisabledField = ({ disabled, name, field, fields, value }) => {
3388
- if (isBoolean(disabled)) {
3389
- const inputValue = disabled ? void 0 : isUndefined(value) ? getFieldValue(field ? field._f : get(fields, name)._f) : value;
3390
- set(_formValues, name, inputValue);
3391
- updateTouchAndDirty(name, inputValue, false, false, true);
3392
- }
3393
- };
3394
- const register = (name, options2 = {}) => {
3395
- let field = get(_fields, name);
3396
- const disabledIsDefined = isBoolean(options2.disabled);
3397
- set(_fields, name, {
3398
- ...field || {},
3399
- _f: {
3400
- ...field && field._f ? field._f : { ref: { name } },
3401
- name,
3402
- mount: true,
3403
- ...options2
3404
- }
3405
- });
3406
- _names.mount.add(name);
3407
- if (field) {
3408
- _updateDisabledField({
3409
- field,
3410
- disabled: options2.disabled,
3411
- name
3412
- });
3413
- } else {
3414
- updateValidAndValue(name, true, options2.value);
3415
- }
3416
- return {
3417
- ...disabledIsDefined ? { disabled: options2.disabled } : {},
3418
- ..._options.progressive ? {
3419
- required: !!options2.required,
3420
- min: getRuleValue(options2.min),
3421
- max: getRuleValue(options2.max),
3422
- minLength: getRuleValue(options2.minLength),
3423
- maxLength: getRuleValue(options2.maxLength),
3424
- pattern: getRuleValue(options2.pattern)
3425
- } : {},
3426
- name,
3427
- onChange,
3428
- onBlur: onChange,
3429
- ref: (ref) => {
3430
- if (ref) {
3431
- register(name, options2);
3432
- field = get(_fields, name);
3433
- const fieldRef = isUndefined(ref.value) ? ref.querySelectorAll ? ref.querySelectorAll("input,select,textarea")[0] || ref : ref : ref;
3434
- const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
3435
- const refs = field._f.refs || [];
3436
- if (radioOrCheckbox ? refs.find((option) => option === fieldRef) : fieldRef === field._f.ref) {
3437
- return;
3438
- }
3439
- set(_fields, name, {
3440
- _f: {
3441
- ...field._f,
3442
- ...radioOrCheckbox ? {
3443
- refs: [
3444
- ...refs.filter(live),
3445
- fieldRef,
3446
- ...Array.isArray(get(_defaultValues, name)) ? [{}] : []
3447
- ],
3448
- ref: { type: fieldRef.type, name }
3449
- } : { ref: fieldRef }
3450
- }
3451
- });
3452
- updateValidAndValue(name, false, void 0, fieldRef);
3453
- } else {
3454
- field = get(_fields, name, {});
3455
- if (field._f) {
3456
- field._f.mount = false;
3457
- }
3458
- (_options.shouldUnregister || options2.shouldUnregister) && !(isNameInFieldArray(_names.array, name) && _state.action) && _names.unMount.add(name);
3459
- }
3460
- }
3461
- };
3462
- };
3463
- const _focusError = () => _options.shouldFocusError && iterateFieldsByAction(_fields, _focusInput, _names.mount);
3464
- const _disableForm = (disabled) => {
3465
- if (isBoolean(disabled)) {
3466
- _subjects.state.next({ disabled });
3467
- iterateFieldsByAction(_fields, (ref) => {
3468
- ref.disabled = disabled;
3469
- }, 0, false);
3470
- }
3471
- };
3472
- const handleSubmit = (onValid, onInvalid) => async (e) => {
3473
- if (e) {
3474
- e.preventDefault && e.preventDefault();
3475
- e.persist && e.persist();
3476
- }
3477
- let fieldValues = cloneObject(_formValues);
3478
- _subjects.state.next({
3479
- isSubmitting: true
3480
- });
3481
- if (_options.resolver) {
3482
- const { errors: errors2, values } = await _executeSchema();
3483
- _formState.errors = errors2;
3484
- fieldValues = values;
3485
- } else {
3486
- await executeBuiltInValidation(_fields);
3487
- }
3488
- unset(_formState.errors, "root");
3489
- if (isEmptyObject(_formState.errors)) {
3490
- _subjects.state.next({
3491
- errors: {}
3492
- });
3493
- await onValid(fieldValues, e);
3494
- } else {
3495
- if (onInvalid) {
3496
- await onInvalid({ ..._formState.errors }, e);
3497
- }
3498
- _focusError();
3499
- setTimeout(_focusError);
3500
- }
3501
- _subjects.state.next({
3502
- isSubmitted: true,
3503
- isSubmitting: false,
3504
- isSubmitSuccessful: isEmptyObject(_formState.errors),
3505
- submitCount: _formState.submitCount + 1,
3506
- errors: _formState.errors
3507
- });
3508
- };
3509
- const resetField = (name, options2 = {}) => {
3510
- if (get(_fields, name)) {
3511
- if (isUndefined(options2.defaultValue)) {
3512
- setValue(name, get(_defaultValues, name));
3513
- } else {
3514
- setValue(name, options2.defaultValue);
3515
- set(_defaultValues, name, options2.defaultValue);
3516
- }
3517
- if (!options2.keepTouched) {
3518
- unset(_formState.touchedFields, name);
3519
- }
3520
- if (!options2.keepDirty) {
3521
- unset(_formState.dirtyFields, name);
3522
- _formState.isDirty = options2.defaultValue ? _getDirty(name, get(_defaultValues, name)) : _getDirty();
3523
- }
3524
- if (!options2.keepError) {
3525
- unset(_formState.errors, name);
3526
- _proxyFormState.isValid && _updateValid();
3527
- }
3528
- _subjects.state.next({ ..._formState });
3529
- }
3530
- };
3531
- const _reset = (formValues, keepStateOptions = {}) => {
3532
- const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
3533
- const cloneUpdatedValues = cloneObject(updatedValues);
3534
- const values = formValues && !isEmptyObject(formValues) ? cloneUpdatedValues : _defaultValues;
3535
- if (!keepStateOptions.keepDefaultValues) {
3536
- _defaultValues = updatedValues;
3537
- }
3538
- if (!keepStateOptions.keepValues) {
3539
- if (keepStateOptions.keepDirtyValues || shouldCaptureDirtyFields) {
3540
- for (const fieldName of _names.mount) {
3541
- get(_formState.dirtyFields, fieldName) ? set(values, fieldName, get(_formValues, fieldName)) : setValue(fieldName, get(values, fieldName));
3542
- }
3543
- } else {
3544
- if (isWeb && isUndefined(formValues)) {
3545
- for (const name of _names.mount) {
3546
- const field = get(_fields, name);
3547
- if (field && field._f) {
3548
- const fieldReference = Array.isArray(field._f.refs) ? field._f.refs[0] : field._f.ref;
3549
- if (isHTMLElement(fieldReference)) {
3550
- const form = fieldReference.closest("form");
3551
- if (form) {
3552
- form.reset();
3553
- break;
3554
- }
3555
- }
3556
- }
3557
- }
3558
- }
3559
- _fields = {};
3560
- }
3561
- _formValues = props.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values);
3562
- _subjects.array.next({
3563
- values: { ...values }
3564
- });
3565
- _subjects.values.next({
3566
- values: { ...values }
3567
- });
3568
- }
3569
- _names = {
3570
- mount: /* @__PURE__ */ new Set(),
3571
- unMount: /* @__PURE__ */ new Set(),
3572
- array: /* @__PURE__ */ new Set(),
3573
- watch: /* @__PURE__ */ new Set(),
3574
- watchAll: false,
3575
- focus: ""
3576
- };
3577
- !_state.mount && flushRootRender();
3578
- _state.mount = !_proxyFormState.isValid || !!keepStateOptions.keepIsValid;
3579
- _state.watch = !!props.shouldUnregister;
3580
- _subjects.state.next({
3581
- submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
3582
- isDirty: keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual(formValues, _defaultValues)),
3583
- isSubmitted: keepStateOptions.keepIsSubmitted ? _formState.isSubmitted : false,
3584
- dirtyFields: keepStateOptions.keepDirtyValues ? _formState.dirtyFields : keepStateOptions.keepDefaultValues && formValues ? getDirtyFields(_defaultValues, formValues) : {},
3585
- touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
3586
- errors: keepStateOptions.keepErrors ? _formState.errors : {},
3587
- isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful ? _formState.isSubmitSuccessful : false,
3588
- isSubmitting: false
3589
- });
3590
- };
3591
- const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues) ? formValues(_formValues) : formValues, keepStateOptions);
3592
- const setFocus = (name, options2 = {}) => {
3593
- const field = get(_fields, name);
3594
- const fieldReference = field && field._f;
3595
- if (fieldReference) {
3596
- const fieldRef = fieldReference.refs ? fieldReference.refs[0] : fieldReference.ref;
3597
- if (fieldRef.focus) {
3598
- fieldRef.focus();
3599
- options2.shouldSelect && fieldRef.select();
3600
- }
3601
- }
3602
- };
3603
- const _updateFormState = (updatedFormState) => {
3604
- _formState = {
3605
- ..._formState,
3606
- ...updatedFormState
3607
- };
3608
- };
3609
- const _resetDefaultValues = () => isFunction(_options.defaultValues) && _options.defaultValues().then((values) => {
3610
- reset(values, _options.resetOptions);
3611
- _subjects.state.next({
3612
- isLoading: false
3613
- });
3614
- });
3615
- return {
3616
- control: {
3617
- register,
3618
- unregister,
3619
- getFieldState,
3620
- handleSubmit,
3621
- setError,
3622
- _executeSchema,
3623
- _getWatch,
3624
- _getDirty,
3625
- _updateValid,
3626
- _removeUnmounted,
3627
- _updateFieldArray,
3628
- _updateDisabledField,
3629
- _getFieldArray,
3630
- _reset,
3631
- _resetDefaultValues,
3632
- _updateFormState,
3633
- _disableForm,
3634
- _subjects,
3635
- _proxyFormState,
3636
- get _fields() {
3637
- return _fields;
3638
- },
3639
- get _formValues() {
3640
- return _formValues;
3641
- },
3642
- get _state() {
3643
- return _state;
3644
- },
3645
- set _state(value) {
3646
- _state = value;
3647
- },
3648
- get _defaultValues() {
3649
- return _defaultValues;
3650
- },
3651
- get _names() {
3652
- return _names;
3653
- },
3654
- set _names(value) {
3655
- _names = value;
3656
- },
3657
- get _formState() {
3658
- return _formState;
3659
- },
3660
- set _formState(value) {
3661
- _formState = value;
3662
- },
3663
- get _options() {
3664
- return _options;
3665
- },
3666
- set _options(value) {
3667
- _options = {
3668
- ..._options,
3669
- ...value
3670
- };
3671
- }
3672
- },
3673
- trigger,
3674
- register,
3675
- handleSubmit,
3676
- watch,
3677
- setValue,
3678
- getValues,
3679
- reset,
3680
- resetField,
3681
- clearErrors,
3682
- unregister,
3683
- setError,
3684
- setFocus,
3685
- getFieldState
3686
- };
3687
- }
3688
- function useForm(props = {}) {
3689
- const _formControl = Cn.useRef();
3690
- const _values = Cn.useRef();
3691
- const [formState, updateFormState] = Cn.useState({
3692
- isDirty: false,
3693
- isValidating: false,
3694
- isLoading: isFunction(props.defaultValues),
3695
- isSubmitted: false,
3696
- isSubmitting: false,
3697
- isSubmitSuccessful: false,
3698
- isValid: false,
3699
- submitCount: 0,
3700
- dirtyFields: {},
3701
- touchedFields: {},
3702
- errors: {},
3703
- disabled: false,
3704
- defaultValues: isFunction(props.defaultValues) ? void 0 : props.defaultValues
3705
- });
3706
- if (!_formControl.current) {
3707
- _formControl.current = {
3708
- ...createFormControl(props, () => updateFormState((formState2) => ({ ...formState2 }))),
3709
- formState
3710
- };
3711
- }
3712
- const control = _formControl.current.control;
3713
- control._options = props;
3714
- useSubscribe({
3715
- subject: control._subjects.state,
3716
- next: (value) => {
3717
- if (shouldRenderFormState(value, control._proxyFormState, control._updateFormState, true)) {
3718
- updateFormState({ ...control._formState });
3719
- }
3720
- }
3721
- });
3722
- Cn.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
3723
- Cn.useEffect(() => {
3724
- if (control._proxyFormState.isDirty) {
3725
- const isDirty = control._getDirty();
3726
- if (isDirty !== formState.isDirty) {
3727
- control._subjects.state.next({
3728
- isDirty
3729
- });
3730
- }
3731
- }
3732
- }, [control, formState.isDirty]);
3733
- Cn.useEffect(() => {
3734
- if (props.values && !deepEqual(props.values, _values.current)) {
3735
- control._reset(props.values, control._options.resetOptions);
3736
- _values.current = props.values;
3737
- } else {
3738
- control._resetDefaultValues();
3739
- }
3740
- }, [props.values, control]);
3741
- Cn.useEffect(() => {
3742
- if (!control._state.mount) {
3743
- control._updateValid();
3744
- control._state.mount = true;
3745
- }
3746
- if (control._state.watch) {
3747
- control._state.watch = false;
3748
- control._subjects.state.next({ ...control._formState });
3749
- }
3750
- control._removeUnmounted();
3751
- });
3752
- _formControl.current.formState = getProxyFormState(formState, control);
3753
- return _formControl.current;
3754
- }
3755
- var t = function(e, t2, i2) {
3756
- if (e && "reportValidity" in e) {
3757
- var n2 = get(i2, t2);
3758
- e.setCustomValidity(n2 && n2.message || ""), e.reportValidity();
3759
- }
3760
- }, i$1 = function(r, e) {
3761
- var i2 = function(i3) {
3762
- var n3 = e.fields[i3];
3763
- n3 && n3.ref && "reportValidity" in n3.ref ? t(n3.ref, i3, r) : n3.refs && n3.refs.forEach(function(e2) {
3764
- return t(e2, i3, r);
3765
- });
3766
- };
3767
- for (var n2 in e.fields)
3768
- i2(n2);
3769
- }, n = function(t2, n2) {
3770
- n2.shouldUseNativeValidation && i$1(t2, n2);
3771
- var f = {};
3772
- for (var s in t2) {
3773
- var u = get(n2.fields, s), c = Object.assign(t2[s] || {}, { ref: u && u.ref });
3774
- if (a$1(n2.names || Object.keys(t2), s)) {
3775
- var l = Object.assign({}, o(get(f, s)));
3776
- set(l, "root", c), set(f, s, l);
3777
- } else
3778
- set(f, s, c);
3779
- }
3780
- return f;
3781
- }, o = function(r) {
3782
- return Array.isArray(r) ? r.filter(Boolean) : [];
3783
- }, a$1 = function(r, e) {
3784
- return r.some(function(r2) {
3785
- return r2.startsWith(e + ".");
3786
- });
3787
- };
3788
- var a = function(r, e) {
3789
- for (var t2 = {}; r.issues.length; ) {
3790
- var o2 = r.issues[0];
3791
- if (o2.path) {
3792
- var a2 = o2.path.map(function(r2) {
3793
- return r2.key;
3794
- }).join(".");
3795
- if (t2[a2] || (t2[a2] = { message: o2.message, type: o2.validation }), e) {
3796
- var i2 = t2[a2].types, s = i2 && i2[o2.validation];
3797
- t2[a2] = appendErrors(a2, e, t2, o2.validation, s ? [].concat(s, o2.message) : o2.message);
3798
- }
3799
- r.issues.shift();
3800
- }
3801
- }
3802
- return t2;
3803
- }, i = function(n$1, i2, s) {
3804
- return void 0 === s && (s = {}), function(u, c, f) {
3805
- try {
3806
- return Promise.resolve(function(r, o2) {
3807
- try {
3808
- var a2 = function() {
3809
- function r2(r3) {
3810
- return { values: s.raw ? u : r3, errors: {} };
3811
- }
3812
- var o3 = Object.assign({}, { abortEarly: false, abortPipeEarly: false }, i2);
3813
- return "sync" === s.mode ? r2(parse(n$1, u, o3)) : Promise.resolve(parseAsync(n$1, u, o3)).then(r2);
3814
- }();
3815
- } catch (r2) {
3816
- return o2(r2);
3817
- }
3818
- return a2 && a2.then ? a2.then(void 0, o2) : a2;
3819
- }(0, function(e) {
3820
- if (e instanceof ValiError)
3821
- return { values: {}, errors: n(a(e, !f.shouldUseNativeValidation && "all" === f.criteriaMode), f) };
3822
- throw e;
3823
- }));
3824
- } catch (r) {
3825
- return Promise.reject(r);
3826
- }
3827
- };
3828
- };
3829
- const LABEL_HEIGHT = 27;
3830
- const GAP = 12;
3831
- const PADDING = 10;
3832
- const isMultipleChoiceSubmission = isSubmissionOfType("enum");
3833
- const getResolver$3 = (config) => {
3834
- const length = {
3835
- min: config.minSelected ?? 0,
3836
- max: config.maxSelected ?? config.options.length
3837
- };
3838
- return i(object({
3839
- checked: transform(record(boolean()), (o2) => Object.entries(o2).filter(([_2, v]) => v).map(([k2, _2]) => k2), [maxLength(length.max, `Please select at most ${length.max} option${length.max !== 1 ? "s" : ""}`), minLength(length.min, `Please select at least ${length.min} option${length.min !== 1 ? "s" : ""}`)])
3840
- }));
3841
- };
3842
- const MultipleChoiceOption = k$1(({
3843
- option,
3844
- ...props
3845
- }, ref) => {
3846
- return o$1(k, {
3847
- children: [o$1("input", {
3848
- class: "peer sr-only h-full",
3849
- type: "checkbox",
3850
- ...props,
3851
- ref
3852
- }), o$1("label", {
3853
- class: "bg-lowest hover:bg-neutral-2 active:outline-neutral-8 ease-expo-out outline-divider text-neutral-11 peer-checked:outline-accent-7 peer-checked:bg-accent-2 peer-checked:text-accent-9 peer-focus-visible:ring-accent-9 peer-focus-visible:ring-offset-accent-7 block cursor-pointer select-none rounded-2xl px-3 py-1.5 outline outline-1 ring-0 ring-transparent transition-all selection:bg-transparent peer-focus-visible:ring-4",
3854
- htmlFor: props.id,
3855
- children: option.label
3856
- })]
3857
- });
3858
- });
3859
- const multipleChoiceListClass = cva("gutter-stable flex w-full flex-1 flex-wrap gap-3 overflow-y-auto rounded-xl p-2.5 pr-4", {
3860
- variants: {
3861
- variant: {
3862
- // In cases where there is only one option, we want to center it
3863
- singleOption: "justify-center",
3864
- // Two choices with exactly 1 min 1 max
3865
- booleanLike: booleanButtonListClass
3866
- }
3867
- }
3868
- });
3869
- const ChatInputMultipleChoice = ({
3870
- input,
3871
- onSubmitSuccess
3872
- }) => {
3873
- var _a, _b;
3874
- const submission = input.key ? (_a = store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
3875
- const isSingleChoice = (input.config.minSelected === 1 || input.config.minSelected === void 0) && input.config.maxSelected === 1;
3876
- const isBooleanLike = isSingleChoice && input.config.options.length === 2;
3877
- const {
3878
- register,
3879
- handleSubmit,
3880
- formState: {
3881
- errors: errors2
3882
- }
3883
- } = useForm({
3884
- defaultValues: {
3885
- checked: isSingleChoice ? {} : isMultipleChoiceSubmission(submission) ? Object.fromEntries(submission.value.map((key) => [key, true])) : {}
3886
- },
3887
- resolver: getResolver$3(input.config)
3888
- });
3889
- const focusRef = useFocusOnMount();
3890
- if (isBooleanLike) {
3891
- return o$1("ul", {
3892
- style: {
3893
- maxHeight: 6.5 * LABEL_HEIGHT + 5 * GAP + 2 * PADDING
3894
- },
3895
- class: multipleChoiceListClass({
3896
- variant: "booleanLike"
3897
- }),
3898
- children: input.config.options.map((option, i2) => o$1("li", {
3899
- class: "flex-1",
3900
- children: o$1(BooleanOption, {
3901
- type: "submit",
3902
- ref: (e) => {
3903
- if (e && i2 === 0) {
3904
- focusRef.current = e;
3905
- }
3906
- },
3907
- label: option.label,
3908
- value: "true",
3909
- onClick: () => onSubmitSuccess({
3910
- type: "enum",
3911
- value: [option.value]
3912
- })
3913
- })
3914
- }, option.value))
3915
- });
3916
- }
3917
- return o$1("form", {
3918
- noValidate: true,
3919
- onSubmit: (e) => {
3920
- return handleSubmit((submission2) => {
3921
- const checked = submission2.checked;
3922
- onSubmitSuccess({
3923
- type: "enum",
3924
- value: checked
3925
- });
3926
- })(e);
3927
- },
3928
- children: [o$1("div", {
3929
- class: "flex items-center gap-1",
3930
- children: [o$1("ul", {
3931
- style: {
3932
- maxHeight: 6.5 * LABEL_HEIGHT + 5 * GAP + 2 * PADDING
3933
- },
3934
- class: multipleChoiceListClass({
3935
- variant: input.config.options.length === 1 ? "singleOption" : void 0
3936
- }),
3937
- children: input.config.options.map((option, i2) => {
3938
- const id = `checked.${option.value}`;
3939
- const {
3940
- ref: setRef,
3941
- ...props
3942
- } = register(id);
3943
- return o$1("li", {
3944
- class: "relative",
3945
- children: o$1(MultipleChoiceOption, {
3946
- option,
3947
- autoFocus: i2 === 0,
3948
- ref: (e) => {
3949
- if (e && i2 === 0) {
3950
- focusRef.current = e;
3951
- }
3952
- setRef(e);
3953
- },
3954
- id,
3955
- ...props,
3956
- onClick: isSingleChoice ? () => onSubmitSuccess({
3957
- type: "enum",
3958
- value: [option.value]
3959
- }) : void 0
3960
- })
3961
- }, option.value);
3962
- })
3963
- }), o$1("div", {
3964
- class: "flex flex-col items-center gap-2 pr-2.5 pt-2.5",
3965
- children: [isSingleChoice ? null : o$1(SendButton, {}), input.config.minSelected === 0 && o$1(SkipButton, {
3966
- type: "button",
3967
- onClick: () => onSubmitSuccess({
3968
- type: "enum",
3969
- value: []
3970
- })
3971
- })]
3972
- })]
3973
- }), o$1("div", {
3974
- class: "px-1",
3975
- children: o$1(InputError, {
3976
- error: (_b = errors2.checked) == null ? void 0 : _b.root
3977
- })
3978
- })]
3979
- });
3980
- };
3981
- const isNumberSubmission = isSubmissionOfType("number");
3982
- const errors$1 = {
3983
- number: () => "Please enter a valid number",
3984
- min: (min) => `Please enter a number greater than or equal to ${min}`,
3985
- max: (max) => `Please enter a number less than or equal to ${max}`,
3986
- decimalCases: (decimalCases) => `Please enter a number with at most ${decimalCases} decimal cases`
3987
- };
3988
- const getResolver$2 = (config) => {
3989
- const min = config.min ?? Number.MIN_SAFE_INTEGER;
3990
- const max = config.max ?? Number.MAX_SAFE_INTEGER;
3991
- const decimalCases = config.decimalCases ?? 0;
3992
- return i(object({
3993
- number: number(errors$1.number(), [minValue(min, errors$1.min(min)), maxValue(max, errors$1.max(max)), custom((value) => {
3994
- return value === Number(value.toFixed(decimalCases));
3995
- }, errors$1.decimalCases(decimalCases))])
3996
- }));
3997
- };
3998
- const ChatInputNumber = ({
3999
- input,
4000
- onSubmitSuccess
4001
- }) => {
4002
- var _a;
4003
- const defaultValue = input.config.defaultValue;
4004
- const submission = input.key ? (_a = store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
4005
- const {
4006
- register,
4007
- handleSubmit,
4008
- formState: {
4009
- errors: errors2
4010
- }
4011
- } = useForm({
4012
- defaultValues: {
4013
- number: defaultValue ? Number(defaultValue) : isNumberSubmission(submission) ? submission.value : void 0
4014
- },
4015
- resolver: getResolver$2(input.config)
4016
- });
4017
- const {
4018
- ref: setRef,
4019
- ...props
4020
- } = register("number", {
4021
- required: !input.config.optional,
4022
- valueAsNumber: true
4023
- });
4024
- const ref = _$1();
4025
- y(() => {
4026
- if (ref.current) {
4027
- ref.current.focus();
4028
- ref.current.select();
4029
- }
4030
- }, []);
4031
- return o$1("form", {
4032
- class: "flex flex-col gap-1 p-2.5",
4033
- onSubmit: handleSubmit((submission2) => {
4034
- if (submission2.number === void 0)
4035
- return;
4036
- onSubmitSuccess({
4037
- type: "number",
4038
- value: submission2.number
4039
- });
4040
- }),
4041
- children: [o$1("div", {
4042
- class: "flex items-center gap-2",
4043
- children: [o$1("div", {
4044
- class: "relative min-w-0 flex-grow",
4045
- children: [o$1("input", {
4046
- ...props,
4047
- id: "chat-input",
4048
- autocomplete: "off",
4049
- autoCapitalize: "off",
4050
- autoCorrect: "off",
4051
- autoFocus: true,
4052
- ref: (element) => {
4053
- if (element) {
4054
- ref.current = element;
4055
- }
4056
- setRef(element);
4057
- },
4058
- type: "text",
4059
- min: input.config.min,
4060
- max: input.config.max,
4061
- class: "outline-divider ease-expo-out placeholder:text-neutral-10 text-neutral-12 focus-visible:outline-accent-7 caret-accent-9 bg-lowest [type=number:-webkit-inner-spin-button] w-full rounded-full px-3 py-1 text-base outline outline-2 transition-all [-webkit-outer-spin-button:none]",
4062
- placeholder: input.config.placeholder
4063
- }), input.config.optional && o$1(SkipButton, {
4064
- class: "absolute right-0 top-0",
4065
- onClick: () => onSubmitSuccess(null)
4066
- })]
4067
- }), o$1(SendButton, {})]
4068
- }), o$1(InputError, {
4069
- error: errors2.number
4070
- })]
4071
- });
4072
- };
4073
- const getPhoneNumberParts = (input) => {
4074
- if (input === "")
4075
- return {
4076
- countryCode: "",
4077
- phoneNumber: ""
4078
- };
4079
- const country = Object.entries(countries).find((obj) => {
4080
- return input.startsWith(obj[1]);
4081
- });
4082
- const countryCode = country ? country[1] : "";
4083
- const phoneNumber = input.replace(countryCode, "");
4084
- if (!/^\d+$/.test(phoneNumber)) {
4085
- return {
4086
- countryCode: "",
4087
- phoneNumber: ""
4088
- };
4089
- }
4090
- return {
4091
- countryCode,
4092
- phoneNumber
4093
- };
4094
- };
4095
- const UK_CODE = "44";
4096
- const invalidPhoneErrorMessage = "That doesn’t look like a valid phone number";
4097
- const errorMessages = (config) => ({
4098
- min: `The phone number needs to be at least ${config.minChars} digits long.`,
4099
- max: `The phone number can't be longer than ${config.maxChars} digits.`
4100
- });
4101
- const isTextSubmission$1 = isSubmissionOfType("string");
4102
- const PhoneSchema = string(invalidPhoneErrorMessage, [regex(/^\+?[0-9 -]+$/, invalidPhoneErrorMessage)]);
4103
- const CountryCodeSchema = string("Please select a country code", [regex(/^\+?[0-9 -]+$/, invalidPhoneErrorMessage)]);
4104
- const getResolver$1 = () => {
4105
- return i(object({
4106
- countryCode: CountryCodeSchema,
4107
- phoneNumber: transform(PhoneSchema, (value) => value.replace(/[^0-9]/g, ""), [])
4108
- }));
4109
- };
4110
- const ChatInputPhoneNumber = ({
4111
- input,
4112
- onSubmitSuccess
4113
- }) => {
4114
- var _a;
4115
- const submission = input.key ? (_a = store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
4116
- const [error, setError] = h();
4117
- const {
4118
- register,
4119
- handleSubmit,
4120
- formState: {
4121
- errors: errors2
4122
- },
4123
- watch
4124
- } = useForm({
4125
- defaultValues: input.config.defaultValue ? getPhoneNumberParts(input.config.defaultValue) : isTextSubmission$1(submission) ? getPhoneNumberParts(submission.value) : {
4126
- countryCode: UK_CODE,
4127
- phoneNumber: ""
4128
- },
4129
- resolver: getResolver$1()
4130
- });
4131
- const {
4132
- ref: setRef,
4133
- ...props
4134
- } = register("phoneNumber", {
4135
- required: !input.config.optional
4136
- });
4137
- const inputRef = _$1();
4138
- const countryCodeValue = watch("countryCode");
4139
- y(() => {
4140
- if (inputRef.current) {
4141
- inputRef.current.focus();
4142
- inputRef.current.select();
4143
- }
4144
- }, []);
4145
- return o$1("form", {
4146
- noValidate: true,
4147
- class: "flex flex-col gap-1 p-2.5",
4148
- onSubmit: handleSubmit((submission2) => {
4149
- const submissionBody = submission2.phoneNumber.replace(/[^0-9]/g, "");
4150
- const submissionCountryCode = submission2.countryCode.replace(/[^0-9]/g, "");
4151
- setError(void 0);
4152
- if (submissionBody.length + submissionCountryCode.length > (input.config.maxChars || Infinity))
4153
- return setError(errorMessages(input.config).max);
4154
- if (submissionBody.length + submissionCountryCode.length < (input.config.minChars || 0))
4155
- return setError(errorMessages(input.config).min);
4156
- onSubmitSuccess({
4157
- type: "string",
4158
- value: countryCodeValue + submission2.phoneNumber
4159
- });
4160
- }),
4161
- children: [o$1("div", {
4162
- class: "flex items-center gap-2",
4163
- children: [o$1("div", {
4164
- class: "relative flex min-w-0 flex-1 flex-grow gap-2",
4165
- children: [o$1("label", {
4166
- class: "text-neutral-12 bg-lowest hover:bg-neutral-5 placeholder:text-neutral-8 focus-visible:outline-accent-7 focus-within:bg-neutral-5 focus-within:outline-accent-7 outline-divider relative flex h-full cursor-pointer appearance-none items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-l-full border-solid px-3 py-1.5 text-center text-base outline outline-2 transition-all focus-within:outline-none",
4167
- htmlFor: `isdk_phone_${input.key}`,
4168
- children: [o$1("span", {
4169
- children: ["+", countryCodeValue]
4170
- }), o$1("select", {
4171
- ...register("countryCode", {}),
4172
- id: `isdk_phone_${input.key}`,
4173
- class: "absolute inset-0 opacity-0",
4174
- children: Object.entries(countries).map(([name, code]) => o$1("option", {
4175
- value: code,
4176
- children: [name, " (+", code, ")"]
4177
- }, name))
4178
- })]
4179
- }), o$1("input", {
4180
- ...props,
4181
- id: "chat-input",
4182
- type: "tel",
4183
- inputMode: "tel",
4184
- autocomplete: "off",
4185
- autoCapitalize: "off",
4186
- autoCorrect: "off",
4187
- autoFocus: true,
4188
- ref: (element) => {
4189
- if (element) {
4190
- inputRef.current = element;
4191
- }
4192
- setRef(element);
4193
- },
4194
- class: "outline-divider ease-expo-out placeholder:text-neutral-10 text-neutral-12 focus-visible:outline-accent-7 caret-accent-9 bg-lowest flex-1 rounded-r-full px-3 py-1 text-base outline outline-2 transition-all",
4195
- placeholder: input.config.placeholder
4196
- }), input.config.optional && o$1(SkipButton, {
4197
- class: "absolute right-0 top-0",
4198
- onClick: () => onSubmitSuccess(null)
4199
- })]
4200
- }), o$1(SendButton, {})]
4201
- }), o$1(InputError, {
4202
- error: errors2.countryCode || errors2.phoneNumber || {
4203
- message: error
4204
- }
4205
- })]
4206
- });
4207
- };
4208
- const ChatInputSubmit = ({
4209
- input,
4210
- onSubmitSuccess
4211
- }) => {
4212
- return o$1("div", {
4213
- class: "flex flex-col items-center py-3",
4214
- children: o$1("button", {
4215
- class: "bg-accent-9 hover:bg-accent-10 active:bg-submit-bg-active hover:border-accent-10 active:border-submit-bg-active border-accent-9 ring-accent-6 focus-visible:outline-accent-8 ring-offset-neutral-1 flex cursor-pointer rounded-full border border-solid px-5 py-3 pr-4 text-white outline-none ring-1 ring-offset-[1.5px] transition-all duration-300 focus-visible:outline-2 active:ring-2 active:ring-offset-2",
4216
- name: input.key,
4217
- onClick: () => {
4218
- onSubmitSuccess(null);
4219
- },
4220
- children: o$1("span", {
4221
- class: "flex items-center gap-1.5",
4222
- children: [o$1("span", {
4223
- class: "inline-flex items-center text-sm font-medium",
4224
- children: input.config.label || "Submit"
4225
- }), o$1("svg", {
4226
- stroke: "currentColor",
4227
- "stroke-width": "1.5",
4228
- width: "16",
4229
- height: "16",
4230
- viewBox: "0 0 16 16",
4231
- fill: "none",
4232
- xmlns: "http://www.w3.org/2000/svg",
4233
- children: [o$1("path", {
4234
- d: "M4 8L8 4L12 8"
4235
- }), o$1("path", {
4236
- d: "M8 4V13"
4237
- })]
4238
- })]
4239
- })
4240
- })
4241
- });
4242
- };
4243
- const errors = {
4244
- empty: "Please enter some text",
4245
- email: "That doesn’t look like a valid email address",
4246
- phone: "That doesn’t look like a valid phone number",
4247
- url: "That doesn’t look like a valid URL"
4248
- };
4249
- const inputFormatToProps = {
4250
- email: {
4251
- type: "email",
4252
- inputMode: "email",
4253
- formNoValidate: true
4254
- },
4255
- text: {
4256
- type: "text",
4257
- inputMode: "text"
4258
- },
4259
- url: {
4260
- type: "url",
4261
- inputMode: "url",
4262
- formNoValidate: true
4263
- }
4264
- };
4265
- const isTextSubmission = isSubmissionOfType("string");
4266
- const getResolver = (config) => {
4267
- const configErrors = {
4268
- maxLength: `Please enter no more than ${config.maxChars ?? 999} characters`,
4269
- minLength: `Please enter ${config.minChars ?? 1} or more characters`
4270
- };
4271
- return i(object({
4272
- text: {
4273
- email: string(errors.email, [email(errors.email), minLength(config.minChars ?? 1, configErrors.minLength), maxLength(config.maxChars ?? Infinity, configErrors.maxLength)]),
4274
- text: string([minLength(config.minChars ?? 1, configErrors.minLength), maxLength(config.maxChars ?? Infinity, configErrors.maxLength)]),
4275
- url: string([url(errors.url), minLength(config.minChars ?? 1, configErrors.minLength), maxLength(config.maxChars ?? Infinity, configErrors.maxLength)])
4276
- }[config.format]
4277
- }));
4278
- };
4279
- const ChatInputText = ({
4280
- input,
4281
- onSubmitSuccess
4282
- }) => {
4283
- var _a;
4284
- const submission = input.key ? (_a = store.current$.value.flow) == null ? void 0 : _a.data.submissions[input.key] : void 0;
4285
- const defaultValue = input.config.defaultValue;
4286
- const {
4287
- register,
4288
- handleSubmit,
4289
- formState: {
4290
- errors: errors2
4291
- }
4292
- } = useForm({
4293
- defaultValues: {
4294
- text: defaultValue ? defaultValue : isTextSubmission(submission) ? submission.value : ""
4295
- },
4296
- resolver: getResolver(input.config)
4297
- });
4298
- const {
4299
- ref: setRef,
4300
- ...props
4301
- } = register("text", {
4302
- required: !input.config.optional
4303
- });
4304
- const inputRef = _$1();
4305
- y(() => {
4306
- if (inputRef.current) {
4307
- inputRef.current.focus();
4308
- inputRef.current.select();
4309
- }
4310
- }, []);
4311
- return o$1("form", {
4312
- noValidate: true,
4313
- class: "flex flex-col gap-1 p-2.5",
4314
- onSubmit: handleSubmit((submission2) => {
4315
- onSubmitSuccess({
4316
- type: "string",
4317
- value: submission2.text
4318
- });
4319
- }),
4320
- children: [o$1("div", {
4321
- class: "flex items-center gap-2",
4322
- children: [o$1("div", {
4323
- class: "relative min-w-0 flex-1",
4324
- children: [o$1("input", {
4325
- id: "chat-input",
4326
- ...props,
4327
- ...inputFormatToProps[input.config.format],
4328
- autocomplete: "off",
4329
- autoCapitalize: "off",
4330
- autoCorrect: "off",
4331
- autoFocus: true,
4332
- ref: (element) => {
4333
- if (element) {
4334
- inputRef.current = element;
4335
- }
4336
- setRef(element);
4337
- },
4338
- class: "outline-divider ease-expo-out placeholder:text-neutral-10 text-neutral-12 focus-visible:outline-accent-7 caret-accent-9 bg-lowest w-full rounded-full px-3 py-1 text-base outline outline-2 transition-all",
4339
- placeholder: input.config.placeholder
4340
- }), input.config.optional && o$1(SkipButton, {
4341
- class: "absolute right-0 top-0",
4342
- onClick: () => onSubmitSuccess(null)
4343
- })]
4344
- }), o$1(SendButton, {})]
4345
- }), o$1(InputError, {
4346
- error: errors2.text
4347
- })]
4348
- });
4349
- };
4350
- const ChatInput = () => {
4351
- var _a;
4352
- const input = (_a = store.current$.value.flow) == null ? void 0 : _a.data.currentInput;
4353
- const [inputContentRef, bounds] = useMeasure();
4354
- const inputWrapperRef = _$1(null);
4355
- store.inputHeight$.value = bounds.height;
4356
- p(() => {
4357
- const wrapper = inputWrapperRef.current;
4358
- if (!wrapper)
4359
- return;
4360
- wrapper.addEventListener("transitionstart", chatStore.scrollToEnd.smooth);
4361
- wrapper.addEventListener("transitioncancel", chatStore.scrollToEnd.smooth);
4362
- wrapper.addEventListener("transitionend", chatStore.scrollToEnd.smooth);
4363
- return () => {
4364
- wrapper.removeEventListener("transitionstart", chatStore.scrollToEnd.smooth);
4365
- wrapper.removeEventListener("transitioncancel", chatStore.scrollToEnd.smooth);
4366
- wrapper.removeEventListener("transitionend", chatStore.scrollToEnd.smooth);
4367
- };
4368
- }, []);
4369
- return o$1("div", {
4370
- ref: inputWrapperRef,
4371
- class: "ease-expo-out absolute bottom-0 w-full overflow-hidden rounded-b-3xl backdrop-blur-xl transition-all duration-700 will-change-[height]",
4372
- style: {
4373
- height: bounds.height
4374
- },
4375
- children: o$1("div", {
4376
- ref: inputContentRef,
4377
- class: "border-divider flex flex-col justify-end border-t",
4378
- children: N({
4379
- input
4380
- }).with({
4381
- input: _.nullish
4382
- }, () => o$1("div", {
4383
- class: "flex items-center gap-2 p-2.5",
4384
- children: [o$1("input", {
4385
- "aria-hidden": "true",
4386
- id: "chat-input",
4387
- class: "outline-divider flex-grow rounded-full bg-transparent px-3 py-1 text-base outline outline-2",
4388
- disabled: true
4389
- }), o$1(SendButton, {
4390
- disabled: true,
4391
- "aria-hidden": "true",
4392
- tabIndex: -1
4393
- })]
4394
- })).with({
4395
- input: {
4396
- type: "text"
4397
- }
4398
- }, (props) => o$1(ChatInputText, {
4399
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4400
- ...props
4401
- })).with({
4402
- input: {
4403
- type: "phone"
4404
- }
4405
- }, (props) => o$1(ChatInputPhoneNumber, {
4406
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4407
- ...props
4408
- })).with({
4409
- input: {
4410
- type: "multiple-choice"
4411
- }
4412
- }, (props) => o$1(ChatInputMultipleChoice, {
4413
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4414
- ...props
4415
- })).with({
4416
- input: {
4417
- type: "boolean"
4418
- }
4419
- }, (props) => o$1(ChatInputBoolean, {
4420
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4421
- ...props
4422
- })).with({
4423
- input: {
4424
- type: "file"
4425
- }
4426
- }, (props) => o$1(ChatInputFile, {
4427
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4428
- ...props
4429
- })).with({
4430
- input: {
4431
- type: "submit"
4432
- }
4433
- }, (props) => o$1(ChatInputSubmit, {
4434
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4435
- ...props
4436
- })).with({
4437
- input: {
4438
- type: "address"
4439
- }
4440
- }, (props) => o$1(ChatInputAddress, {
4441
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4442
- ...props
4443
- })).with({
4444
- input: {
4445
- type: "number"
4446
- }
4447
- }, (props) => o$1(ChatInputNumber, {
4448
- onSubmitSuccess: chatStore.onSubmitSuccessFn$.value,
4449
- ...props
4450
- })).exhaustive()
4451
- })
4452
- });
4453
- };
4454
- var isRegExp = function(re) {
4455
- return re instanceof RegExp;
4456
- };
4457
- var escapeRegExp = function escapeRegExp2(string2) {
4458
- var reRegExpChar = /[\\^$.*+?()[\]{}|]/g, reHasRegExpChar = RegExp(reRegExpChar.source);
4459
- return string2 && reHasRegExpChar.test(string2) ? string2.replace(reRegExpChar, "\\$&") : string2;
4460
- };
4461
- var isString = function(value) {
4462
- return typeof value === "string";
4463
- };
4464
- var flatten = function(array) {
4465
- var newArray = [];
4466
- array.forEach(function(item) {
4467
- if (Array.isArray(item)) {
4468
- newArray = newArray.concat(item);
4469
- } else {
4470
- newArray.push(item);
4471
- }
4472
- });
4473
- return newArray;
4474
- };
4475
- function replaceString(str, match, fn) {
4476
- var curCharStart = 0;
4477
- var curCharLen = 0;
4478
- if (str === "") {
4479
- return str;
4480
- } else if (!str || !isString(str)) {
4481
- throw new TypeError("First argument to react-string-replace#replaceString must be a string");
4482
- }
4483
- var re = match;
4484
- if (!isRegExp(re)) {
4485
- re = new RegExp("(" + escapeRegExp(re) + ")", "gi");
4486
- }
4487
- var result = str.split(re);
4488
- for (var i2 = 1, length = result.length; i2 < length; i2 += 2) {
4489
- if (result[i2] === void 0 || result[i2 - 1] === void 0) {
4490
- console.warn("reactStringReplace: Encountered undefined value during string replacement. Your RegExp may not be working the way you expect.");
4491
- continue;
4492
- }
4493
- curCharLen = result[i2].length;
4494
- curCharStart += result[i2 - 1].length;
4495
- result[i2] = fn(result[i2], i2, curCharStart);
4496
- curCharStart += curCharLen;
4497
- }
4498
- return result;
4499
- }
4500
- var reactStringReplace = function reactStringReplace2(source, match, fn) {
4501
- if (!Array.isArray(source))
4502
- source = [source];
4503
- return flatten(source.map(function(x) {
4504
- return isString(x) ? replaceString(x, match, fn) : x;
4505
- }));
4506
- };
4507
- const reactStringReplace$1 = /* @__PURE__ */ getDefaultExportFromCjs(reactStringReplace);
4508
- const mdLinkRegexp = /(\[[^\]]+\]\([^)]+\))/g;
4509
- const mdLinkPartsRegexp = /\[([^\]]+)\]\(([^)]+)\)/;
4510
- const urlRegexp = /(https?:\/\/[^\s]+)/g;
4511
- const emRegexp = /_(.*?)_/g;
4512
- const strongRegexp = /\*\*(.*?)\*\*/g;
4513
- const inlineLinkClass = "text-accent-10 hover:text-accent-11 no-underline underline-offset-2 hover:underline";
4514
- const parseMarkdownToJSX = (input) => {
4515
- const withLink = reactStringReplace$1(input, mdLinkRegexp, (mdLink, i2) => {
4516
- const [, text, url2] = mdLink.match(mdLinkPartsRegexp) ?? [];
4517
- if (!url2)
4518
- return o$1("span", {
4519
- children: "INVALID LINK"
4520
- });
4521
- return o$1("a", {
4522
- class: inlineLinkClass,
4523
- href: url2,
4524
- children: text ?? url2
4525
- }, url2 + i2);
4526
- });
4527
- const withUrl = reactStringReplace$1(withLink, urlRegexp, (url2, i2) => o$1("a", {
4528
- class: inlineLinkClass,
4529
- href: url2,
4530
- children: url2
4531
- }, url2 + i2));
4532
- const withEm = reactStringReplace$1(withUrl, emRegexp, (match, i2) => o$1("em", {
4533
- children: match
4534
- }, match + i2));
4535
- const withStrong = reactStringReplace$1(withEm, strongRegexp, (match, i2) => o$1("strong", {
4536
- children: match
4537
- }, match + i2));
4538
- return withStrong;
4539
- };
4540
- const chatBubbleVariants = cva("select-text max-w-[min(100%,24rem)] [text-wrap:pretty] leading-snug flex-shrink min-w-[2rem] py-2 px-3 rounded-[18px] min-h-[36px] break-words relative", {
4541
- variants: {
4542
- side: {
4543
- left: "bg-bubble-weak-bg text-neutral-12 shadow-surface-sm outline outline-1 outline-bubble-weak rounded-bl-md",
4544
- right: "ml-auto bg-accent-9 text-white rounded-br-md shadow-surface-sm shadow-bubble-strong-shadow"
4545
- },
4546
- animate: {
4547
- true: "animate-bubble-in",
4548
- false: ""
4549
- }
4550
- },
4551
- defaultVariants: {
4552
- side: "left"
4553
- }
4554
- });
4555
- const ChatBubble = ({
4556
- children,
4557
- className,
4558
- animate,
4559
- side,
4560
- ...props
4561
- }) => {
4562
- return o$1("p", {
4563
- style: {
4564
- transformOrigin: side === "left" ? "0% 50%" : "100% 50%"
4565
- },
4566
- class: chatBubbleVariants({
4567
- className,
4568
- side,
4569
- animate
4570
- }),
4571
- ...props,
4572
- children
4573
- });
4574
- };
4575
- const LinkMessage = ({
4576
- message
4577
- }) => {
4578
- return o$1("div", {
4579
- class: "bg-accent-3 flex w-full items-center justify-center overflow-hidden rounded-xl px-2 py-2",
4580
- children: o$1("a", {
4581
- onClick: message.onClick,
4582
- class: "bg-lowest shadow-surface-sm ring-accent-6 hover:ring-accent-8 active:bg-accent-2 active:text-accent-10 text-accent-9 focus-visible:ring-accent-7/50 text-wrap-balance flex items-center gap-1.5 rounded-full py-2 pl-4 pr-2.5 text-center no-underline ring-1 transition-all focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2",
4583
- target: "_blank",
4584
- href: message.href,
4585
- children: [message.text, o$1("svg", {
4586
- class: "flex-none",
4587
- width: "15",
4588
- height: "15",
4589
- viewBox: "0 0 15 15",
4590
- fill: "none",
4591
- xmlns: "http://www.w3.org/2000/svg",
4592
- children: o$1("path", {
4593
- d: "M3.64645 11.3536C3.45118 11.1583 3.45118 10.8417 3.64645 10.6465L10.2929 4L6 4C5.72386 4 5.5 3.77614 5.5 3.5C5.5 3.22386 5.72386 3 6 3L11.5 3C11.6326 3 11.7598 3.05268 11.8536 3.14645C11.9473 3.24022 12 3.36739 12 3.5L12 9.00001C12 9.27615 11.7761 9.50001 11.5 9.50001C11.2239 9.50001 11 9.27615 11 9.00001V4.70711L4.35355 11.3536C4.15829 11.5488 3.84171 11.5488 3.64645 11.3536Z",
4594
- fill: "currentColor",
4595
- "fill-rule": "evenodd",
4596
- "clip-rule": "evenodd"
4597
- })
4598
- })]
4599
- })
4600
- });
4601
- };
4602
- const TypingIndicator = ({
4603
- className,
4604
- ...props
4605
- }) => {
4606
- p(() => {
4607
- chatStore.scrollToEnd.smooth();
4608
- });
4609
- return o$1("div", {
4610
- "aria-hidden": true,
4611
- children: chatStore.isBotTyping$.value === true ? o$1("div", {
4612
- "aria-label": "Typing…",
4613
- class: clsx("flex gap-1 p-4", className),
4614
- ...props,
4615
- children: Array.from({
4616
- length: 3
4617
- }, (_2, i2) => o$1("div", {
4618
- class: "bg-accent-9 h-1.5 w-1.5 animate-bounce rounded-full",
4619
- style: {
4620
- animationDelay: `${-i2 * 200}ms`
4621
- }
4622
- }))
4623
- }) : void 0
4624
- });
4625
- };
4626
- const authorToSide = {
4627
- bot: "left",
4628
- user: "right"
4629
- };
4630
- const systemMessageStyle = cva("w-full select-none py-2 text-wrap-balance text-center text-[10px] uppercase tracking-widest drop-shadow-[0_1.5px_var(--i-color-n-1)]", {
4631
- variants: {
4632
- variant: {
4633
- info: "text-neutral-8",
4634
- warning: "text-[#FFC107]",
4635
- error: "text-error-9",
4636
- success: "text-[#4CAF50]"
4637
- }
4638
- }
4639
- });
4640
- const Conversation = ({
4641
- lastSentMessageFooter
4642
- }) => {
4643
- var _a;
4644
- const messages = ((_a = store.current$.value.flow) == null ? void 0 : _a.data.messages) ?? [];
4645
- p(() => {
4646
- chatStore.scrollToEnd.smooth();
4647
- }, [messages.length]);
4648
- return o$1("ol", {
4649
- "aria-label": "Chat messages",
4650
- class: "mt-auto flex flex-col justify-end gap-2 p-2 pt-[calc(var(--header-height)+1rem)]",
4651
- children: [messages.map((message, i2) => {
4652
- return o$1(k, {
4653
- children: o$1("li", {
4654
- class: "flex",
4655
- children: N(message).with({
4656
- type: "system"
4657
- }, (message2) => o$1("p", {
4658
- class: systemMessageStyle({
4659
- variant: message2.variant
4660
- }),
4661
- children: message2.text
4662
- })).with({
4663
- type: "text",
4664
- author: _.union("bot", "user")
4665
- }, (message2) => {
4666
- const isLastSentMessage = message2.author === "user" && !messages.slice(i2 + 1).some((m) => m.type === "text" && m.author === "user");
4667
- const isLastMessage = i2 === messages.length - 1;
4668
- const body = message2.author === "bot" ? parseMarkdownToJSX(message2.text) : message2.text;
4669
- return o$1(ChatBubble, {
4670
- animate: isLastMessage,
4671
- side: authorToSide[message2.author],
4672
- children: [body, isLastSentMessage ? lastSentMessageFooter : null]
4673
- }, i2);
4674
- }).with({
4675
- type: "link"
4676
- }, (message2) => o$1(LinkMessage, {
4677
- message: message2
4678
- })).with({
4679
- type: "image"
4680
- }, (image) => o$1("img", {
4681
- class: "shadow-surface-md w-full max-w-[min(100%,24rem)] rounded-2xl",
4682
- src: image.url,
4683
- style: {
4684
- aspectRatio: image.width / image.height
4685
- }
4686
- })).with({
4687
- type: "file"
4688
- }, (file) => {
4689
- return o$1(FileThumbnail, {
4690
- class: file.author === "bot" ? void 0 : "ml-auto",
4691
- file: {
4692
- name: file.fileName,
4693
- sizeKb: file.fileSizeKb
4694
- }
4695
- });
4696
- }).with({
4697
- type: "loading"
4698
- }, (message2) => {
4699
- const lastMessage = messages[messages.length - 1];
4700
- const isLastMessage = message2 === lastMessage;
4701
- if (!isLastMessage || chatStore.isBotTyping$.value)
4702
- return null;
4703
- return o$1("div", {
4704
- class: "flex flex-grow flex-col items-center justify-center",
4705
- children: o$1(LoadingIndicator, {
4706
- class: "text-neutral-6 h-8 w-8"
4707
- })
4708
- });
4709
- }).exhaustive()
4710
- })
4711
- }, i2);
4712
- }), o$1(TypingIndicator, {}, "typing")]
4713
- });
4714
- };
4715
- const ChatbotBody = ({
4716
- logger,
4717
- apiClient,
4718
- analytics
4719
- }) => {
4720
- const {
4721
- flow
4722
- } = store.current$.value;
4723
- invariant(flow, "Flow is required to exist to show chatbot body");
4724
- const view = store.viewState$.value;
4725
- const {
4726
- chatRef,
4727
- chatService
4728
- } = useChatService();
4729
- const [undoFn, setUndoFn] = h();
4730
- y(() => {
4731
- if (view === "maximised")
4732
- chatStore.scrollToEnd.instant();
4733
- }, [view]);
4734
- y(() => {
4735
- var _a, _b;
4736
- const {
4737
- state,
4738
- flow: currentApplication
4739
- } = store.current$.peek();
4740
- if (state !== "loaded")
4741
- throw new Error(ERROR_MESSAGES.invalid_state);
4742
- let fromNodeId = currentApplication.data.nodeHistory.at(-1);
4743
- chatStore.scrollToEnd.instant();
4744
- store.setInput(void 0);
4745
- if (currentApplication.data.isFinished)
4746
- return;
4747
- if (fromNodeId === void 0) {
4748
- fromNodeId = getHeadOrThrow(flow.nodes).id;
4749
- store.setCurrentNodeId(fromNodeId);
4750
- analytics.log({
4751
- event: "FLOW_START",
4752
- properties: {
4753
- flow_id: flow.id,
4754
- flow_version: flow.version,
4755
- flow_session_id: currentApplication.data.flowSessionId,
4756
- flow_build: flow.build,
4757
- job: flow.job
4758
- },
4759
- customProperties: (_a = flow.analytics) == null ? void 0 : _a.customProperties
4760
- });
4761
- } else {
4762
- store.removeMessagesSentByNodeIds([fromNodeId]);
4763
- }
4764
- const {
4765
- interpret: interpret2,
4766
- abort,
4767
- undo
4768
- } = createFlowInterpreter({
4769
- context: flow.context,
4770
- analytics: {
4771
- service: analytics,
4772
- customProperties: (_b = flow.analytics) == null ? void 0 : _b.customProperties
4773
- },
4774
- apiClient,
4775
- logger,
4776
- flow,
4777
- chatService,
4778
- // We need to get fresh submissions, that’s why we call `peek` here.
4779
- getSubmissions: () => {
4780
- var _a2;
4781
- return (_a2 = store.current$.peek().flow) == null ? void 0 : _a2.data.submissions;
4782
- },
4783
- onInterpret: (node, prevNode) => {
4784
- var _a2;
4785
- const currentState = store.current$.peek().flow;
4786
- invariant(currentState);
4787
- if (prevNode) {
4788
- currentState.data.sequence = currentState.data.sequence + 1;
4789
- analytics.log({
4790
- event: "FLOW_NODE",
4791
- properties: {
4792
- flow_id: flow.id,
4793
- flow_version: flow.version,
4794
- from_node_id: prevNode.id,
4795
- flow_build: flow.build,
4796
- to_node_id: node.id,
4797
- sequence: currentState.data.sequence,
4798
- flow_session_id: currentState.data.flowSessionId,
4799
- job: flow.job
4800
- },
4801
- customProperties: (_a2 = flow.analytics) == null ? void 0 : _a2.customProperties
4802
- });
4803
- }
4804
- store.setCurrentNodeId(node.id);
4805
- },
4806
- onFlowEnd: async () => {
4807
- var _a2;
4808
- store.markAsFinished();
4809
- const currentState = store.current$.peek().flow;
4810
- invariant(currentState);
4811
- analytics.log({
4812
- event: "FLOW_END",
4813
- properties: {
4814
- flow_id: flow.id,
4815
- flow_version: flow.version,
4816
- flow_session_id: currentState.data.flowSessionId,
4817
- flow_build: flow.build,
4818
- job: flow.job
4819
- },
4820
- customProperties: (_a2 = flow.analytics) == null ? void 0 : _a2.customProperties
4821
- });
4822
- }
4823
- });
4824
- setUndoFn(() => undo);
4825
- interpret2(fromNodeId);
4826
- return abort;
4827
- }, [analytics, apiClient, chatService, logger, flow]);
4828
- return o$1(k, {
4829
- children: [o$1("div", {
4830
- ref: chatRef,
4831
- className: "hide-scrollbars relative flex w-full max-w-full flex-grow flex-col overflow-y-scroll",
4832
- style: {
4833
- WebkitOverflowScrolling: "touch",
4834
- paddingBottom: store.inputHeight$.value
4835
- },
4836
- children: o$1(Conversation, {
4837
- lastSentMessageFooter: flow.data.isFinished || !undoFn ? null : o$1(UndoButton, {
4838
- undoFn
4839
- })
4840
- })
4841
- }), o$1(ChatInput, {})]
4842
- });
4843
- };
4844
- const getNodeKeys = (node) => {
4845
- if ("key" in node.data && node.data.key)
4846
- return [node.data.key];
4847
- if ("keys" in node.data)
4848
- return Object.values(node.data.keys).filter((key) => typeof key === "string");
4849
- return [];
4850
- };
4851
- const UndoButton = ({
4852
- undoFn
4853
- }) => {
4854
- return o$1("div", {
4855
- class: "absolute bottom-0 right-0 flex w-full translate-y-full justify-end",
4856
- children: o$1("button", {
4857
- class: "fr touch-hitbox text-neutral-9 hover:text-neutral-12 rounded-full p-1 text-right text-xs transition-all",
4858
- onClick: async () => {
4859
- const {
4860
- flow
4861
- } = store.current$.peek();
4862
- invariant(flow);
4863
- const {
4864
- removed
4865
- } = undoFn(flow.data.nodeHistory);
4866
- const removedNodeIds = flow.data.nodeHistory.splice(-removed);
4867
- if (removedNodeIds.length === 0)
4868
- return;
4869
- store.removeMessagesSentByNodeIds(removedNodeIds);
4870
- store.setInput(void 0);
4871
- removedNodeIds.pop();
4872
- removedNodeIds.map((nodeId) => flow.nodes.find((node) => node.id === nodeId)).filter(Boolean).flatMap(getNodeKeys).forEach((key) => delete flow.data.submissions[key]);
4873
- store.current$.value = {
4874
- ...store.current$.value
4875
- };
4876
- },
4877
- children: "Undo"
4878
- })
4879
- });
4880
- };
4881
- export {
4882
- ChatbotBody
4883
- };