-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1180 lines (1135 loc) · 70.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
<!--<meta name="theme-color" content="#000000">-->
<title>Emotive AI Agent Builder | ustwo labs</title>
</head>
<body>
<script type="module" src="/src/gui.ts"></script>
<!--svg icon defs-->
<svg style="display: none;">
<defs>
<symbol id="edit-icon" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.8344 1.54314C11.0066 1.37094 11.211 1.23435 11.436 1.14116C11.661 1.04796 11.9021 1 12.1456 1C12.3891 1 12.6303 1.04796 12.8553 1.14116C13.0802 1.23435 13.2847 1.37094 13.4569 1.54314C13.6291 1.71533 13.7657 1.91976 13.8588 2.14474C13.952 2.36973 14 2.61086 14 2.85439C14 3.09791 13.952 3.33904 13.8588 3.56403C13.7657 3.78901 13.6291 3.99344 13.4569 4.16563L4.60593 13.0166L1 14L1.98344 10.3941L10.8344 1.54314Z"
stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="shuffle-icon" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.0851 1C19.2654 1 18.5991 1.66803 18.5991 2.48942C18.5991 3.23436 19.1486 3.84739 19.8621 3.95604V8.42744C19.8621 8.79722 19.5615 9.09815 19.1932 9.09815H18.4787V6.11617C18.4787 5.25274 17.7786 4.55118 16.9179 4.55118H2.56084C1.6997 4.55118 1 5.25274 1 6.11617V12.5259C1 13.3893 1.6997 14.0909 2.56084 14.0909H16.9188C17.7799 14.0909 18.4796 13.3893 18.4796 12.5259V9.54484H19.1945C19.8095 9.54484 20.3094 9.04315 20.3094 8.42699V3.95559C21.022 3.84649 21.5714 3.23346 21.5714 2.48898C21.571 1.66803 20.9038 1 20.0851 1ZM12.3549 4.99877V13.6442H7.1234V4.99877H12.3549ZM1.44595 12.5264V6.11662C1.44595 5.50046 1.94587 4.99877 2.56084 4.99877H6.67744V13.6442H2.56084C1.94587 13.6442 1.44595 13.1425 1.44595 12.5264ZM18.0337 12.5264C18.0337 13.1425 17.5338 13.6442 16.9188 13.6442H12.8017V4.99877H16.9183C17.5333 4.99877 18.0332 5.50046 18.0332 6.11662L18.0337 12.5264ZM20.0851 3.53126C19.512 3.53126 19.0451 3.064 19.0451 2.48898C19.0451 1.91395 19.512 1.44669 20.0851 1.44669C20.6581 1.44669 21.1241 1.91395 21.1241 2.48898C21.1241 3.064 20.6595 3.53126 20.0851 3.53126Z"
stroke-width="0.5"/>
<g clip-path="url(#clip0_146_2540)">
<path d="M5.05275 8.16882L3.18262 10.039" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M3.18262 8.16882L5.05275 10.039" stroke-linecap="square" stroke-linejoin="round"/>
</g>
<g clip-path="url(#clip1_146_2540)">
<path d="M16.2734 8.16882L14.4033 10.039" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M14.4033 8.16882L16.2734 10.039" stroke-linecap="square" stroke-linejoin="round"/>
</g>
<g clip-path="url(#clip2_146_2540)">
<path d="M10.8057 9.93506L8.93555 11.8052" stroke-linecap="square" stroke-linejoin="round"/>
<path d="M8.93555 9.93506L10.8057 11.8052" stroke-linecap="square" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_146_2540">
<rect width="3.74026" height="3.74026" fill="white" transform="translate(2.24707 7.23376)"/>
</clipPath>
<clipPath id="clip1_146_2540">
<rect width="3.74026" height="3.74026" fill="white" transform="translate(13.4678 7.23376)"/>
</clipPath>
<clipPath id="clip2_146_2540">
<rect width="3.74026" height="3.74026" fill="white" transform="translate(8 9)"/>
</clipPath>
</defs>
</symbol>
<symbol id="done-icon" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 2L5.4375 10L2 6.36364" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/>
</symbol>
<symbol id="sym-assertive" viewBox="0 0 16 20" xmlns="http://www.w3.org/2000/svg">
<path d="M7.42561 1.71399L14.5671 18.8535L7.42561 11.4264L0.855469 18.2822" stroke-width="0.5" fill="none"/>
<circle stroke="none" cx="7.28516" cy="11.2837" r="1"/>
<circle stroke="none" cx="7.28516" cy="1" r="1"/>
<circle stroke="none" cx="14.7109" cy="18.7108" r="1"/>
<circle stroke="none" cx="1" cy="18.1395" r="1"/>
</symbol>
<symbol id="sym-compassionate" viewBox="0 0 15 20" xmlns="http://www.w3.org/2000/svg">
<circle stroke="none" cx="14" cy="19" r="1"/>
<circle stroke="none" cx="14" cy="1" r="1" stroke-width="0.5"/>
<circle stroke="none" cx="1" cy="10" r="1" stroke-width="0.5"/>
<path fill="none" d="M14 19C6.8203 19 1 18.7097 1 10C1 1.87097 6.8203 1 14 1" stroke-width="0.5"/>
<circle fill="none" cx="6" cy="10" r="4.75" stroke-width="0.5"/>
</symbol>
<symbol id="sym-curious" viewBox="0 0 17 20" xmlns="http://www.w3.org/2000/svg">
<circle stroke="none" cx="15" cy="19" r="1"/>
<circle stroke="none" cx="15" cy="1" r="1" stroke-width="0.5"/>
<path fill="none" d="M15 19C7.8203 19 2 18.7097 2 10C2 1.87097 7.8203 1 15 1" stroke-width="0.5"/>
<circle stroke="none" cx="2.2739" cy="10.2184" r="1" transform="rotate(-123.025 2.2739 10.2184)" stroke-width="0.5"/>
<circle stroke="none" cx="8.27781" cy="15.5072" r="1" transform="rotate(-123.025 8.27781 15.5072)" stroke-width="0.5"/>
<path fill="none"
d="M8.20474 15.4267C9.53449 13.8264 12.6472 10.6096 12.8699 10.3416C13.1482 10.0067 13.6008 7.92924 11.4661 6.1554C9.33142 4.38156 7.44419 4.40344 6.71691 5.22881C6.17949 5.83872 3.58975 8.77776 2.45215 10.0688"
stroke-width="0.5"/>
</symbol>
<symbol id="sym-excited" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12.2205" cy="1.11111" r="0.611111"/>
<circle cx="1.11111" cy="1.11111" r="0.611111"/>
<circle cx="1.11111" cy="18.8889" r="0.611111"/>
<circle cx="12.2205" cy="18.3333" r="0.611111"/>
<circle cx="3.88845" cy="10" r="0.611111"/>
<path d="M11.9427 1.11108H1.10938L7.77604 9.7222L1.10938 18.6111H12.2205" stroke-width="0.5"/>
</symbol>
<symbol id="sym-optimistic" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="8.75" stroke-width="0.5"/>
<circle cx="9.11111" cy="16.1111" r="0.611111"/>
</symbol>
<symbol id="sym-playful" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="5" r="4.75" stroke-width="0.5"/>
<path d="M1 17V1" stroke-width="0.5"/>
<path d="M1 10L10 10" stroke-width="0.5"/>
<circle cx="9" cy="10" r="0.5"/>
<circle cx="1" cy="10" r="0.5"/>
<circle cx="1" cy="1" r="0.5"/>
<circle cx="1" cy="17" r="0.5"/>
</symbol>
<symbol id="sym-wellness" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10.5" cy="10.5" r="10" stroke="#360CAE"/>
<circle cx="4.6312" cy="13.8971" r="0.838235" fill="#360CAE"/>
<circle cx="10.4554" cy="3.75004" r="0.838235" fill="#360CAE"/>
<circle cx="16.5414" cy="7.10294" r="0.838235" fill="#360CAE"/>
</symbol>
<symbol id="sym-financial" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10.5" cy="10.5" r="10" transform="matrix(1 0 0 -1 0 21)" stroke="#7C570F"/>
<circle cx="0.838235" cy="0.838235" r="0.838235" transform="matrix(1 0 0 -1 3.79297 7.94116)"
fill="#7C570F"/>
<circle cx="0.838235" cy="0.838235" r="0.838235" transform="matrix(1 0 0 -1 9.61719 18.0883)"
fill="#7C570F"/>
<circle cx="0.838235" cy="0.838235" r="0.838235" transform="matrix(1 0 0 -1 9.61719 4.41174)"
fill="#7C570F"/>
</symbol>
<symbol id="sym-sales" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10.5" cy="10.5" r="10" stroke="#BF0834"/>
<circle cx="4.6312" cy="13.8971" r="0.838235" fill="#BF0834"/>
<circle cx="16.4554" cy="7.01475" r="0.838235" fill="#BF0834"/>
<circle cx="16.5414" cy="13.8088" r="0.838235" fill="#BF0834"/>
</symbol>
<symbol id="sym-productivity" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10.5" cy="10.5" r="10" stroke="#0B830F"/>
<circle cx="10.5453" cy="17.4265" r="0.838235" fill="#0B830F"/>
<circle cx="4.72105" cy="7.1912" r="0.838235" fill="#0B830F"/>
<circle cx="16.5453" cy="13.8088" r="0.838235" fill="#0B830F"/>
</symbol>
<symbol id="error-sadface" width="21" height="14" viewBox="0 0 21 14" stroke="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.65625 2.2735C5.10666 2.2735 4.65625 1.82412 4.65625 1.2735C4.65625 0.723905 5.10563 0.273499 5.65625 0.273499C6.20584 0.273499 6.65625 0.722879 6.65625 1.2735C6.65625 1.82412 6.20582 2.2735 5.65625 2.2735Z"/>
<path
d="M15.125 2.2735C14.5754 2.2735 14.125 1.82412 14.125 1.2735C14.125 0.723905 14.5744 0.273499 15.125 0.273499C15.6746 0.273499 16.125 0.722879 16.125 1.2735C16.125 1.82412 15.6746 2.2735 15.125 2.2735Z"/>
<path
d="M0.437897 12.174C1.61839 7.51588 6.07831 4.14615 10.9889 4.36835C15.5878 4.57683 19.4839 7.80606 20.5691 12.1789C20.829 12.3598 21 12.6607 21 13C21 13.5506 20.5496 14 20 14C19.4504 14 19 13.5506 19 13C19 12.6985 19.1352 12.4269 19.3482 12.243C18.3165 8.47579 14.9241 5.71427 10.9337 5.5337C6.6634 5.33746 2.78002 8.22582 1.6575 12.248C1.86706 12.4316 2 12.7009 2 13C2 13.5506 1.54957 14 1 14C0.450407 14 0 13.5506 0 13C0 12.6581 0.173901 12.3546 0.437897 12.174Z"/>
</symbol>
<symbol id="button-start" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17.5" cy="1.5" r="1" fill="black"/>
<circle cx="32.5" cy="30.5" r="1" fill="black"/>
<circle cx="1.5" cy="30.5" r="1" fill="black"/>
<circle cx="17.5" cy="19.5" r="2.5" fill="black" stroke="black"/>
<circle cx="17.5" cy="19.5" r="15" stroke="black"/>
</symbol>
<symbol id="button-shape" viewBox="0 0 33 35" xmlns="http://www.w3.org/2000/svg">
<circle cx="32" cy="30.5" r="1" stroke="none"/>
<circle cx="1" cy="30.5" r="1" stroke="none"/>
<circle cx="17" cy="1.5" r="1" stroke="none"/>
<circle cx="17" cy="19.5" r="15" fill="none"/>
<path
d="M12.0953 24C12.0953 24.2761 12.3192 24.5 12.5953 24.5C12.8715 24.5 13.0953 24.2761 13.0953 24H12.0953ZM13.0953 20.5C13.0953 20.2239 12.8715 20 12.5953 20C12.3192 20 12.0953 20.2239 12.0953 20.5H13.0953ZM12.0953 18.5C12.0953 18.7761 12.3192 19 12.5953 19C12.8715 19 13.0953 18.7761 13.0953 18.5H12.0953ZM13.0953 15C13.0953 14.7239 12.8715 14.5 12.5953 14.5C12.3192 14.5 12.0953 14.7239 12.0953 15H13.0953ZM16.35 24C16.35 24.2761 16.5739 24.5 16.85 24.5C17.1261 24.5 17.35 24.2761 17.35 24H16.35ZM17.35 19.5C17.35 19.2238 17.1261 19 16.85 19C16.5739 19 16.35 19.2238 16.35 19.5H17.35ZM16.35 17.5C16.35 17.7761 16.5739 18 16.85 18C17.1261 18 17.35 17.7761 17.35 17.5H16.35ZM17.35 15C17.35 14.7239 17.1261 14.5 16.85 14.5C16.5739 14.5 16.35 14.7239 16.35 15H17.35ZM20.6047 23.9999C20.6047 24.2761 20.8285 24.4999 21.1047 24.4999C21.3808 24.4999 21.6047 24.2761 21.6047 23.9999H20.6047ZM21.6047 21.4999C21.6047 21.2238 21.3808 20.9999 21.1047 20.9999C20.8285 20.9999 20.6047 21.2238 20.6047 21.4999H21.6047ZM20.6047 19.5C20.6047 19.7761 20.8285 20 21.1047 20C21.3808 20 21.6047 19.7761 21.6047 19.5H20.6047ZM21.6047 15C21.6047 14.7239 21.3808 14.5 21.1047 14.5C20.8285 14.5 20.6047 14.7239 20.6047 15H21.6047ZM11 20C10.7239 20 10.5 20.2239 10.5 20.5C10.5 20.7762 10.7239 21 11 21V20ZM14.1906 21C14.4668 21 14.6906 20.7762 14.6906 20.5C14.6906 20.2239 14.4668 20 14.1906 20V21ZM15.2547 17C14.9785 17 14.7547 17.2239 14.7547 17.5C14.7547 17.7762 14.9785 18 15.2547 18V17ZM18.4453 18C18.7215 18 18.9453 17.7762 18.9453 17.5C18.9453 17.2239 18.7215 17 18.4453 17V18ZM19.5094 20.9999C19.2332 20.9999 19.0094 21.2238 19.0094 21.4999C19.0094 21.7761 19.2332 21.9999 19.5094 21.9999V20.9999ZM22.7 21.9999C22.9761 21.9999 23.2 21.7761 23.2 21.4999C23.2 21.2238 22.9761 20.9999 22.7 20.9999V21.9999ZM13.0953 24V20.5H12.0953V24H13.0953ZM13.0953 18.5V15H12.0953V18.5H13.0953ZM17.35 24V19.5H16.35V24H17.35ZM17.35 17.5V15H16.35V17.5H17.35ZM21.6047 23.9999V21.4999H20.6047V23.9999H21.6047ZM21.6047 19.5V15H20.6047V19.5H21.6047ZM11 21H14.1906V20H11V21ZM15.2547 18H18.4453V17H15.2547V18ZM19.5094 21.9999H22.7V20.9999H19.5094V21.9999Z"
stroke="none"/>
</symbol>
<symbol id="button-test" width="33" height="34" viewBox="0 0 33 34" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="19" r="14.5" fill="none"/>
<circle cx="17" cy="1" r="1" stroke="none"/>
<circle cx="1" cy="29" r="1" stroke="none"/>
<circle cx="32" cy="29" r="1" stroke="none"/>
<path d="M22 18.1945C22.0021 19.001 21.8136 19.7967 21.45 20.5167C21.0188 21.3794 20.3559 22.1051 19.5357 22.6123C18.7154 23.1196 17.77 23.3885 16.8055 23.3889C15.999 23.391 15.2033 23.2025 14.4833 22.8389L11 24L12.1611 20.5167C11.7975 19.7967 11.609 19.001 11.6111 18.1945C11.6115 17.23 11.8804 16.2846 12.3877 15.4643C12.8949 14.6441 13.6206 13.9812 14.4833 13.55C15.2033 13.1864 15.999 12.9979 16.8055 13H17.1111C18.3849 13.0703 19.588 13.6079 20.49 14.51C21.3921 15.412 21.9297 16.6151 22 17.8889V18.1945Z" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="button-done" viewBox="0 0 34 35" xmlns="http://www.w3.org/2000/svg">
<circle cx="17.5" cy="19.5" r="15" fill="none"/>
<circle cx="17.5" cy="1" r="1" stroke="none"/>
<circle cx="1.5" cy="30" r="1" stroke="none"/>
<circle cx="32.5" cy="30" r="1" stroke="none"/>
<path d="M23 14L15.4375 25L12 20" stroke-linecap="square" stroke-linejoin="round" fill="none"/>
</symbol>
<symbol id="arrow-dn" width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 1L3.5 0.5L4.5 0.5L4.5 1L3.5 1ZM4.35355 9.35355C4.15829 9.54882 3.84171 9.54882 3.64645 9.35355L0.464466 6.17157C0.269204 5.97631 0.269204 5.65973 0.464466 5.46447C0.659728 5.2692 0.976311 5.2692 1.17157 5.46447L4 8.29289L6.82843 5.46447C7.02369 5.2692 7.34027 5.2692 7.53553 5.46447C7.7308 5.65973 7.7308 5.97631 7.53553 6.17157L4.35355 9.35355ZM4.5 1L4.5 9L3.5 9L3.5 1L4.5 1Z" fill="#360CAE"/>
</symbol>
<symbol id="icon-drag" viewBox="0 0 28 58" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="13.3615" cy="26.976" rx="7.50605" ry="7.48503" stroke="none" opacity="0.25"/>
<ellipse cx="13.3603" cy="26.9761" rx="9.00726" ry="8.98204" fill="none" stroke-width="0.5"/>
<path d="M14.3633 26.9758C14.3633 26.4265 13.9163 25.9788 13.3621 25.9788C12.8078 25.9788 12.3608 26.4265 12.3608 26.9758C12.3608 27.5251 12.8078 27.9728 13.3621 27.9728C13.9163 27.9728 14.3633 27.5251 14.3633 26.9758Z"/>
<mask id="path-4-inside-1_1384_677" stroke="none">
<ellipse cx="13.3585" cy="15.7485" rx="0.750605" ry="0.748503"/>
</mask>
<ellipse cx="13.3585" cy="15.7485" rx="0.750605" ry="0.748503" stroke="none"/>
<path d="M13.1091 15.7485C13.1091 15.607 13.2234 15.497 13.3585 15.497V17.497C14.3227 17.497 15.1091 16.7168 15.1091 15.7485H13.1091ZM13.3585 15.497C13.4936 15.497 13.6079 15.607 13.6079 15.7485H11.6079C11.6079 16.7168 12.3943 17.497 13.3585 17.497V15.497ZM13.6079 15.7485C13.6079 15.89 13.4936 16 13.3585 16V14C12.3943 14 11.6079 14.7802 11.6079 15.7485H13.6079ZM13.3585 16C13.2234 16 13.1091 15.89 13.1091 15.7485H15.1091C15.1091 14.7802 14.3227 14 13.3585 14V16Z" stroke="none" mask="url(#path-4-inside-1_1384_677)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3499 35.5616L13.4754 45.0881C13.4779 45.278 13.6342 45.4167 13.8237 45.3971C14.0131 45.3775 14.1653 45.2069 14.1628 45.017L14.0848 39.0915C14.0779 38.5716 14.4779 38.1036 14.9888 38.0203C15.0083 38.017 15.0872 38.0089 15.1067 38.0081C15.6184 37.9856 16.0302 38.3691 16.0365 38.8896L16.1145 44.8151C16.117 45.005 16.2733 45.1437 16.4628 45.1241C16.6522 45.1045 16.8044 44.9339 16.8019 44.744L16.7365 39.7803C16.7999 39.7476 16.8552 39.6967 16.8933 39.6331C17.0539 39.3641 17.3286 39.1638 17.6465 39.1126C17.6659 39.1094 17.7449 39.1012 17.7643 39.1004C18.2766 39.0773 18.6879 39.4614 18.6941 39.9819L18.7542 44.5414C18.7567 44.7313 18.913 44.87 19.1024 44.8504C19.2919 44.8308 19.4441 44.6602 19.4416 44.4703L19.4113 42.1693C19.4044 41.6494 19.8044 41.1813 20.3154 41.098C20.3348 41.0948 20.4137 41.0866 20.4332 41.0858C20.9449 41.0634 21.3567 41.4469 21.363 41.9674L21.4 44.7773C21.4068 45.2911 21.3157 45.8095 21.1319 46.307C20.8225 47.1442 20.1223 48.37 20.1223 48.37C20.089 48.4283 20.0722 48.4928 20.0731 48.5573L20.1282 52.7431C20.1307 52.933 20.287 53.0717 20.4765 53.052C20.6659 53.0324 20.8181 52.8619 20.8156 52.672L20.7618 48.5838C20.9328 48.2759 21.4993 47.2408 21.7741 46.4967C21.9896 45.9155 22.0953 45.3078 22.0868 44.707L22.0497 41.8971C22.0381 41.0096 21.3368 40.3561 20.4642 40.3952C20.4314 40.3962 20.2984 40.4105 20.265 40.4158C19.9386 40.4691 19.6389 40.6135 19.3923 40.8206L19.3803 39.9124C19.3686 39.0249 18.6674 38.3714 17.7948 38.4105C17.7614 38.4121 17.629 38.4258 17.5956 38.4311C17.2692 38.4844 16.9694 38.6288 16.7229 38.8359L16.7227 38.8201C16.711 37.9325 16.0098 37.2791 15.1371 37.3182C15.1043 37.3192 14.9713 37.3335 14.9379 37.3388C14.6115 37.3921 14.3124 37.537 14.0652 37.7436L14.0355 35.4913C14.0238 34.6037 13.3226 33.9503 12.45 33.9894C12.4172 33.9904 12.2842 34.0047 12.2508 34.01C11.3789 34.152 10.6968 34.9486 10.7091 35.8354L10.8064 43.2192L9.49348 42.1085C8.77779 41.5095 7.67689 41.6265 6.98298 42.3584C6.9572 42.3861 6.85719 42.5031 6.83448 42.5335C6.22419 43.3348 6.29215 44.4323 7.00785 45.0312C7.00723 45.0307 9.77311 47.3633 11.0201 48.4071C11.4044 48.7288 11.6253 49.2076 11.6322 49.7312C11.6463 50.7989 11.6828 53.6181 11.6828 53.6181C11.6853 53.808 11.8416 53.9467 12.031 53.9271C12.2205 53.9075 12.3727 53.7369 12.3702 53.547L12.319 49.6595C12.3096 48.946 12.0085 48.2951 11.4859 47.8579C10.2402 46.8139 7.47493 44.4831 7.47493 44.4831L7.47431 44.4825C7.02792 44.1081 6.98483 43.4226 7.3656 42.9229C7.37995 42.9044 7.44282 42.8302 7.45961 42.8126C7.89263 42.3558 8.58 42.2822 9.02639 42.6567L10.9258 44.2638C11.0261 44.3491 11.1734 44.3607 11.2996 44.2934C11.4258 44.2261 11.5055 44.0935 11.5043 43.9553L11.3964 35.7655C11.3896 35.2456 11.7896 34.7775 12.3005 34.6942C12.3199 34.691 12.3989 34.6828 12.4183 34.682C12.93 34.6596 13.3419 35.043 13.3481 35.5636L13.3499 35.5616Z" stroke="none"/>
<path d="M25.8608 5C22.1695 2.45601 17.8839 1 13.3128 1C8.78132 1 4.53034 2.43089 0.86084 4.93412" fill="none" stroke-dasharray="2 2"/>
<path d="M13.3608 11V11.5H14.3608V11H13.3608ZM14.2144 4.14645C14.0191 3.95118 13.7025 3.95118 13.5073 4.14645L10.3253 7.32843C10.13 7.52369 10.13 7.84027 10.3253 8.03553C10.5206 8.2308 10.8372 8.2308 11.0324 8.03553L13.8608 5.20711L16.6893 8.03553C16.8845 8.2308 17.2011 8.2308 17.3964 8.03553C17.5916 7.84027 17.5916 7.52369 17.3964 7.32843L14.2144 4.14645ZM14.3608 11V4.5H13.3608V11H14.3608Z" stroke="none"/>
<path d="M22.8608 29.5885C19.9078 27.9422 16.4793 27 12.8224 27C9.19722 27 5.79644 27.926 2.86084 29.5459" fill="none" stroke-width="0.5"/>
</symbol>
<symbol id="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z" transform="translate(12, 12) scale(0)"><animateTransform attributeName="transform" calcMode="spline" type="translate" dur="1.2s" values="12 12;0 0" keySplines=".52,.6,.25,.99" repeatCount="indefinite"/><animateTransform attributeName="transform" calcMode="spline" additive="sum" type="scale" dur="1.2s" values="0;1" keySplines=".52,.6,.25,.99" repeatCount="indefinite"/><animate attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" repeatCount="indefinite"/>
</path>
</symbol>
</defs>
</svg>
<!--end svg defs-->
<div class="screen" style="opacity: 0;">
<div class="card-backgrounds full-page-gradients">
<div class="primary"></div>
<div class="secondary"></div>
<div class="tertiary"></div>
</div>
<div class="page landing">
<div class="landing-page-graphic">
<div class="trait-icon">
<svg width="17" height="20">
<use href="#sym-curious"></use>
</svg>
</div>
<div class="trait-icon">
<svg width="14" height="20">
<use href="#sym-excited"></use>
</svg>
</div>
<div class="trait-icon">
<svg width="18" height="18">
<use href="#sym-optimistic"></use>
</svg>
</div>
<div class="trait-icon">
<svg width="14" height="18">
<use href="#sym-playful"></use>
</svg>
</div>
<div class="trait-icon">
<svg width="16" height="20">
<use href="#sym-assertive"></use>
</svg>
</div>
<div class="trait-icon">
<svg width="15" height="20">
<use href="#sym-compassionate"></use>
</svg>
</div>
<div class="ring-dot"></div>
<div class="ring-dot"></div>
<div class="ring-dot"></div>
<div class="ring-dot"></div>
<div class="ring-dot"></div>
<div class="ring-dot"></div>
<div class="ring"></div>
<div class="page-title">
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.16095 6C1.23954 6.1398 1.35391 6.33476 1.50286 6.56716C1.81878 7.06005 2.2867 7.71568 2.89467 8.36912C4.12146 9.68768 5.85027 10.9268 8 10.9268C10.1497 10.9268 11.8785 9.68768 13.1053 8.36912C13.7133 7.71568 14.1812 7.06005 14.4971 6.56716C14.6461 6.33477 14.7605 6.1398 14.839 6C14.7605 5.8602 14.6461 5.66523 14.4971 5.43284C14.1812 4.93995 13.7133 4.28432 13.1053 3.63088C11.8785 2.31232 10.1497 1.07317 8 1.07317C5.85027 1.07317 4.12146 2.31232 2.89467 3.63088C2.2867 4.28432 1.81878 4.93995 1.50286 5.43284C1.35391 5.66524 1.23954 5.8602 1.16095 6ZM15.4554 6C15.9447 5.76433 15.9446 5.76414 15.9445 5.76394L15.9442 5.76342L15.9435 5.76202L15.9414 5.75773L15.9341 5.74333C15.9279 5.73117 15.919 5.71397 15.9075 5.69206C15.8845 5.64824 15.8509 5.58554 15.8068 5.50665C15.7188 5.34895 15.5888 5.12612 15.4181 4.85984C15.0775 4.32834 14.5711 3.61812 13.9083 2.90571C12.5935 1.49255 10.5946 0 8 0C5.40541 0 3.40653 1.49255 2.09172 2.90571C1.42889 3.61812 0.922525 4.32834 0.581862 4.85984C0.411188 5.12612 0.28121 5.34895 0.193173 5.50665C0.149134 5.58554 0.115529 5.64824 0.0925173 5.69206C0.0810096 5.71397 0.0721452 5.73117 0.0659442 5.74333L0.0586406 5.75773L0.0564902 5.76202L0.055791 5.76342L0.0555356 5.76394C0.055434 5.76414 0.0553429 5.76433 0.544629 6L0.0553429 5.76433C-0.0184476 5.91303 -0.0184476 6.08697 0.0553429 6.23567L0.544629 6C0.0553429 6.23567 0.055434 6.23586 0.0555356 6.23606L0.055791 6.23658L0.0564902 6.23798L0.0586406 6.24226L0.0659442 6.25667C0.0721452 6.26882 0.0810096 6.28603 0.0925173 6.30794C0.115529 6.35176 0.149134 6.41446 0.193173 6.49335C0.28121 6.65105 0.411188 6.87388 0.581862 7.14016C0.922525 7.67166 1.42889 8.38188 2.09172 9.09429C3.40653 10.5074 5.40541 12 8 12C10.5946 12 12.5935 10.5074 13.9083 9.09429C14.5711 8.38188 15.0775 7.67166 15.4181 7.14016C15.5888 6.87388 15.7188 6.65105 15.8068 6.49335C15.8509 6.41446 15.8845 6.35176 15.9075 6.30794C15.919 6.28603 15.9279 6.26882 15.9341 6.25667L15.9414 6.24226L15.9435 6.23798L15.9442 6.23658L15.9445 6.23606C15.9446 6.23586 15.9447 6.23567 15.4554 6ZM15.4554 6L15.9447 6.23567C16.0184 6.08697 16.0184 5.91303 15.9447 5.76433L15.4554 6ZM8.00151 4.48761C7.19083 4.48761 6.51286 5.15322 6.51286 5.99981C6.51286 6.8464 7.19082 7.512 8.00151 7.512C8.8122 7.512 9.49017 6.8464 9.49017 5.99981C9.49017 5.15322 8.8122 4.48761 8.00151 4.48761ZM5.4236 5.99981C5.4236 4.58338 6.5663 3.41444 8.00151 3.41444C9.43673 3.41444 10.5794 4.58338 10.5794 5.99981C10.5794 7.41624 9.43673 8.58518 8.00151 8.58518C6.5663 8.58518 5.4236 7.41624 5.4236 5.99981Z" fill="black"/>
</svg>
Emotive AI<br>Agent Builder
<img src="./ustwo-logo.svg" width="50">
</div>
</div>
<div class="subtitle">Explore the functional and emotional range of generative AI agents by shaping and testing
your own.
</div>
<div class="next-button" id="page-landing-next">
<div class="button-icon landing">
<svg width="35" height="35" xmlns="http://www.w3.org/2000/svg">
<use href="#button-start"></use>
</svg>
</div>
Start
</div>
</div>
<div class="page one hidden">
<div class="header">
<div class="page-title">What kind of agent would you like to shape?</div>
</div>
<div class="card-interface">
<!--<div class="desktop-spacer"></div>-->
<div class="card" id="Health">
<div class="card-backgrounds">
<div class="primary"></div>
<div class="secondary"></div>
<div class="tertiary"></div>
</div>
<div class="card-ornaments">
<div class="border-side"></div>
<div class="border-end"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
</div>
<div class="card-title-block">
<div class="agent-icon">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<use href="#sym-wellness"></use>
</svg>
</div>
<div class="card-title">Wellness Coach</div>
<div class="job-description">A coach to a person seeking to achieve wellness goals through lifestyle and behavior adjustments.
</div>
</div>
<div class="traits-block">
<div class="an">Who is</div>
<div class="divider">
<div></div>
•
<div></div>
</div>
<div class="keywords">
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="16" height="20">
<use href="#sym-assertive"></use>
</svg>
</div>
<span class="keyword">Assertive
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="15" height="20">
<use href="#sym-compassionate"></use>
</svg>
</div>
<span class="keyword">Compassionate
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="17" height="20">
<use href="#sym-curious"></use>
</svg>
</div>
<span class="keyword">Curious
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="20">
<use href="#sym-excited"></use>
</svg>
</div>
<span class="keyword">Excited
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="18" height="18">
<use href="#sym-optimistic"></use>
</svg>
</div>
<span class="keyword">Optimistic
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="18">
<use href="#sym-playful"></use>
</svg>
</div>
<span class="keyword">Playful
</span>
</div>
</div>
</div>
<div class="divider done">
<div></div>
•
<div></div>
</div>
<div class="toolbar">
<div class="button edit">
<div class="icon">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#edit-icon"></use>
</svg>
</div>
Edit
</div>
<div class="button shuffle">
<div class="icon">
<svg width="22" height="15" viewBox="0 0 22 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#shuffle-icon"></use>
</svg>
</div>
Shuffle
</div>
<div class="button done">
<div class="icon">
<svg width="34" height="36" xmlns="http://www.w3.org/2000/svg">
<use href="#button-done"></use>
</svg>
</div>
Done
</div>
</div>
</div>
<div class="card" id="Financial">
<div class="card-backgrounds">
<div class="primary"></div>
<div class="secondary"></div>
<div class="tertiary"></div>
</div>
<div class="card-ornaments">
<div class="border-side"></div>
<div class="border-end"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
</div>
<div class="card-title-block">
<div class="agent-icon">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<use href="#sym-financial"></use>
</svg>
</div>
<div class="card-title">Financial Adviser</div>
<div class="job-description">An adviser to a person seeking to improve their financial literacy and achieve financial goals.
</div>
</div>
<div class="traits-block">
<div class="an">Who is</div>
<div class="divider">
<div></div>
•
<div></div>
</div>
<div class="keywords">
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="16" height="20">
<use href="#sym-assertive"></use>
</svg>
</div>
<span class="keyword">Assertive
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="15" height="20">
<use href="#sym-compassionate"></use>
</svg>
</div>
<span class="keyword">Compassionate
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="17" height="20">
<use href="#sym-curious"></use>
</svg>
</div>
<span class="keyword">Curious
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="20">
<use href="#sym-excited"></use>
</svg>
</div>
<span class="keyword">Excited
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="18" height="18">
<use href="#sym-optimistic"></use>
</svg>
</div>
<span class="keyword">Optimistic
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="18">
<use href="#sym-playful"></use>
</svg>
</div>
<span class="keyword">Playful
</span>
</div>
</div>
</div>
<div class="divider done">
<div></div>
•
<div></div>
</div>
<div class="toolbar">
<div class="button edit">
<div class="icon">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#edit-icon"></use>
</svg>
</div>
Edit
</div>
<div class="button shuffle">
<div class="icon">
<svg width="22" height="15" viewBox="0 0 22 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#shuffle-icon"></use>
</svg>
</div>
Shuffle
</div>
<div class="button done">
<div class="icon">
<svg width="34" height="36" xmlns="http://www.w3.org/2000/svg">
<use href="#button-done"></use>
</svg>
</div>
Done
</div>
</div>
</div>
<div class="card" id="Sales">
<div class="card-backgrounds">
<div class="primary"></div>
<div class="secondary"></div>
<div class="tertiary"></div>
</div>
<div class="card-ornaments">
<div class="border-side"></div>
<div class="border-end"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
</div>
<div class="card-title-block">
<div class="agent-icon">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<use href="#sym-sales"></use>
</svg>
</div>
<div class="card-title">Sales Representative</div>
<div class="job-description">An assistant to a person who needs help figuring out what to buy and whether to buy it.
</div>
</div>
<div class="traits-block">
<div class="an">Who is</div>
<div class="divider">
<div></div>
•
<div></div>
</div>
<div class="keywords">
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="16" height="20">
<use href="#sym-assertive"></use>
</svg>
</div>
<span class="keyword">Assertive
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="15" height="20">
<use href="#sym-compassionate"></use>
</svg>
</div>
<span class="keyword">Compassionate
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="17" height="20">
<use href="#sym-curious"></use>
</svg>
</div>
<span class="keyword">Curious
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="20">
<use href="#sym-excited"></use>
</svg>
</div>
<span class="keyword">Excited
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="18" height="18">
<use href="#sym-optimistic"></use>
</svg>
</div>
<span class="keyword">Optimistic
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="18">
<use href="#sym-playful"></use>
</svg>
</div>
<span class="keyword">Playful
</span>
</div>
</div>
</div>
<div class="divider done">
<div></div>
•
<div></div>
</div>
<div class="toolbar">
<div class="button edit">
<div class="icon">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#edit-icon"></use>
</svg>
</div>
Edit
</div>
<div class="button shuffle">
<div class="icon">
<svg width="22" height="15" viewBox="0 0 22 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#shuffle-icon"></use>
</svg>
</div>
Shuffle
</div>
<div class="button done">
<div class="icon">
<svg width="34" height="36" xmlns="http://www.w3.org/2000/svg">
<use href="#button-done"></use>
</svg>
</div>
Done
</div>
</div>
</div>
<div class="card" id="Productivity">
<div class="card-backgrounds">
<div class="primary"></div>
<div class="secondary"></div>
<div class="tertiary"></div>
</div>
<div class="card-ornaments">
<div class="border-side"></div>
<div class="border-end"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
</div>
<div class="card-title-block">
<div class="agent-icon">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<use href="#sym-productivity"></use>
</svg>
</div>
<div class="card-title">Productivity Partner</div>
<div class="job-description">A partner to a person seeking to realize personal and professional goals in their day to day life
</div>
</div>
<div class="traits-block">
<div class="an">Who is</div>
<div class="divider">
<div></div>
•
<div></div>
</div>
<div class="keywords">
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="16" height="20">
<use href="#sym-assertive"></use>
</svg>
</div>
<span class="keyword">Assertive
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="15" height="20">
<use href="#sym-compassionate"></use>
</svg>
</div>
<span class="keyword">Compassionate
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="17" height="20">
<use href="#sym-curious"></use>
</svg>
</div>
<span class="keyword">Curious
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="20">
<use href="#sym-excited"></use>
</svg>
</div>
<span class="keyword">Excited
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="18" height="18">
<use href="#sym-optimistic"></use>
</svg>
</div>
<span class="keyword">Optimistic
</span>
</div>
<div class="trait-keyword unselected">
<div class="trait-icon">
<svg width="14" height="18">
<use href="#sym-playful"></use>
</svg>
</div>
<span class="keyword">Playful
</span>
</div>
</div>
</div>
<div class="divider done">
<div></div>
•
<div></div>
</div>
<div class="toolbar">
<div class="button edit">
<div class="icon">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#edit-icon"></use>
</svg>
</div>
Edit
</div>
<div class="button shuffle">
<div class="icon">
<svg width="22" height="15" viewBox="0 0 22 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use href="#shuffle-icon"></use>
</svg>
</div>
Shuffle
</div>
<div class="button done">
<div class="icon">
<svg width="34" height="36" xmlns="http://www.w3.org/2000/svg">
<use href="#button-done"></use>
</svg>
</div>
Done
</div>
</div>
</div>
<div class="spacer"></div>
</div>
<div class="footer">
<div class="next-button" id="page-one-next">
<div class="button-icon">
<svg width="35" height="35" xmlns="http://www.w3.org/2000/svg">
<use href="#button-shape"></use>
</svg>
</div>
Shape My Agent
</div>
</div>
<div class="error selection-qty disabled">
<div class="msgbox-outer">
<div class="msgbox-inner">
<div class="end-ornament">
<div class="pip"></div>
<div class="icon">
<svg width="15" height="11" viewBox="0 0 15 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1004_7490)">
<path
d="M1 5.66667C1 5.66667 3.33333 1 7.41667 1C11.5 1 13.8333 5.66667 13.8333 5.66667C13.8333 5.66667 11.5 10.3333 7.41667 10.3333C3.33333 10.3333 1 5.66667 1 5.66667Z"
stroke-linecap="round" stroke-linejoin="round"/>
<path
d="M7.41797 7.4165C8.38447 7.4165 9.16797 6.633 9.16797 5.6665C9.16797 4.70001 8.38447 3.9165 7.41797 3.9165C6.45147 3.9165 5.66797 4.70001 5.66797 5.6665C5.66797 6.633 6.45147 7.4165 7.41797 7.4165Z"
stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_1004_7490">
<rect width="15" height="11" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="pip"></div>
</div>
<div class="msgbox-content">
<div class="msg-icon">
<svg width="21" height="21" xmlns="http://www.w3.org/2000/svg">
<use href="#error-sadface"></use>
</svg>
</div>
<div class="msg-text">Please select three keywords</div>
</div>
<div class="end-ornament">
<div class="pip"></div>
<div class="icon">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 0.5L0.5 7.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.5 0.5L7.5 7.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="pip"></div>
</div>
</div>
</div>
</div>
</div>
<div class="page two hidden">
<div class="header">
<div class="page-title">Shape your agent to your liking.</div>
</div>
<div class="polygon-preview">
<div class="radial-interface">
<div class="divider-axes">
<div class="axis ASSERTIVE PLAYFUL"><div class="pip mid"></div><div class="pip end"></div></div>
<div class="axis ASSERTIVE COMPASSIONATE"><div class="pip mid"></div><div class="pip end"></div></div>
<div class="axis COMPASSIONATE CURIOUS"><div class="pip mid"></div><div class="pip end"></div></div>
<div class="axis CURIOUS EXCITED"><div class="pip mid"></div><div class="pip end"></div></div>
<div class="axis EXCITED OPTIMISTIC"><div class="pip mid"></div><div class="pip end"></div></div>
<div class="axis OPTIMISTIC PLAYFUL"><div class="pip mid"></div><div class="pip end"></div></div>
</div>
<div class="axes">
<div class="axis">
<div class="axis-label">
<div class="trait-icon">
<svg width="16" height="20"><use href="#sym-assertive"></use></svg>
</div>
Assertive
</div>
<div class="handle" id="assertive"><div class="grab-handle"><div class="inner"></div></div></div>
</div>
<div class="axis">
<div class="axis-label">
<div class="trait-icon">
<svg width="15" height="20"><use href="#sym-compassionate"></use></svg>
</div>
Compassionate
</div>
<div class="handle" id="compassionate"><div class="grab-handle"><div class="inner"></div></div></div>
</div>
<div class="axis">
<div class="axis-label">
<div class="trait-icon">
<svg width="17" height="20"><use href="#sym-curious"></use></svg>
</div>
Curious
</div>
<div class="handle" id="curious"><div class="grab-handle"><div class="inner"></div></div></div>
</div>
<div class="axis">
<div class="axis-label">
<div class="trait-icon">
<svg width="14" height="20"><use href="#sym-excited"></use></svg>
</div>
Excited
</div>
<div class="handle" id="excited"><div class="grab-handle"><div class="inner"></div></div></div>
</div>
<div class="axis">
<div class="axis-label">
<div class="trait-icon">
<svg width="18" height="18"><use href="#sym-optimistic"></use></svg>
</div>
Optimistic
</div>
<div class="handle" id="optimistic"><div class="grab-handle"><div class="inner"></div></div></div>
</div>
<div class="axis">
<div class="axis-label">
<div class="trait-icon">
<svg width="14" height="18"><use href="#sym-playful"></use></svg>
</div>
Playful
</div>
<div class="handle" id="playful"><div class="grab-handle"><div class="inner"></div></div></div>
</div>
</div>
<div class="concentric-circle" id="6">
<div class="concentric-circle" id="5">
<div class="concentric-circle" id="4">
<div class="concentric-circle" id="3">
<div class="concentric-circle" id="2">
<div class="concentric-circle" id="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="conversation-sample">
<div class="sample-ornaments">
<div class="border-side"></div>
<div class="border-end">
<div class="border-top">
<div class="border-seg"></div>
<div class="block-title">Live Personality Sample</div>
<div class="border-seg"></div>
</div>
<div class="border-bottom">
<div class="border-seg"></div>
<div class="trend-icons">
<div class="trait-icon assertive">
<svg width="16" height="20"><use href="#sym-assertive"></use></svg>
</div>
<div class="trait-icon compassionate">
<svg width="15" height="20"><use href="#sym-compassionate"></use></svg>
</div>
<div class="trait-icon curious">
<svg width="17" height="20"><use href="#sym-curious"></use></svg>
</div>
<div class="trait-icon excited">
<svg width="14" height="20"><use href="#sym-excited"></use></svg>
</div>
<div class="trait-icon optimistic">
<svg width="18" height="18"><use href="#sym-optimistic"></use></svg>
</div>
<div class="trait-icon playful">
<svg width="14" height="18"><use href="#sym-playful"></use></svg>
</div>
</div>
<div class="border-seg"></div>
</div>
</div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
<div class="corner"></div>
</div>
<div class="conversation-text adjusting">Hold on please while we generate a block of text greeting you, the user, in the role that you've defined in the last step..
</div>
<div class="conversation-spinner adjusting">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<use href="#spinner"></use>
</svg>
</div>
</div>
</div>
<div class="footer">
<div class="next-button" id="page-two-next">
<div class="button-icon">
<svg width="35" height="35" xmlns="http://www.w3.org/2000/svg">
<use href="#button-test"></use>
</svg>
</div>
Test My Agent
</div>
</div>
<div class="error drag-instruction">
<div class="msgbox-outer">
<div class="msgbox-inner">
<div class="end-ornament">
<div class="pip"></div>
<div class="icon">
<svg width="15" height="11" viewBox="0 0 15 11" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1004_7490)">
<path