@qfei-design/make-ai-assistant 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PUBLIC_API.md +22 -17
- package/README.md +41 -31
- package/dist/react/make-ai-assistant.d.ts +7 -1
- package/dist/react/theme.d.ts +9 -9
- package/dist/react.cjs +4 -4
- package/dist/react.mjs +449 -447
- package/dist/styles.css +183 -85
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -3,36 +3,45 @@
|
|
|
3
3
|
--make-ai-internal-accent-strong: var(--make-ai-theme-primary-hover, var(--make-ai-accent-strong, var(--make-color-primary-hover, color-mix(in srgb, var(--make-ai-internal-accent) 84%, var(--make-ai-internal-text)))));
|
|
4
4
|
--make-ai-internal-on-accent: var(--make-ai-theme-on-primary, var(--make-ai-on-accent, #fcfcff));
|
|
5
5
|
--make-ai-internal-accent-soft: var(--make-ai-accent-soft, color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-bg)));
|
|
6
|
-
--make-ai-internal-bg:
|
|
7
|
-
--make-ai-internal-surface:
|
|
8
|
-
--make-ai-internal-surface-strong:
|
|
9
|
-
--make-ai-internal-text:
|
|
10
|
-
--make-ai-internal-text-secondary:
|
|
11
|
-
--make-ai-internal-border:
|
|
6
|
+
--make-ai-internal-bg: #f7f9fc;
|
|
7
|
+
--make-ai-internal-surface: #fff;
|
|
8
|
+
--make-ai-internal-surface-strong: #f1f4f9;
|
|
9
|
+
--make-ai-internal-text: #15233d;
|
|
10
|
+
--make-ai-internal-text-secondary: #738096;
|
|
11
|
+
--make-ai-internal-border: #dbe3ef;
|
|
12
|
+
--make-ai-internal-user-message-bg: #2f6df6;
|
|
13
|
+
--make-ai-internal-user-message-text: #fff;
|
|
12
14
|
--make-ai-internal-success: var(--make-ai-success, var(--make-color-success, #1a9a61));
|
|
13
15
|
--make-ai-internal-warning: var(--make-ai-warning, var(--make-color-warning, #c77b00));
|
|
14
16
|
--make-ai-internal-danger: var(--make-ai-danger, var(--make-color-danger, #d04444));
|
|
15
17
|
--make-ai-internal-radius: var(--make-ai-radius, var(--make-radius-large, 14px));
|
|
16
|
-
--make-ai-internal-shadow:
|
|
17
|
-
--make-ai-internal-overlay:
|
|
18
|
-
--make-ai-internal-on-overlay:
|
|
19
|
-
--make-ai-internal-overlay-shadow:
|
|
20
|
-
--make-ai-internal-highlight: color-mix(in srgb,
|
|
21
|
-
--make-ai-internal-drawer-min-width: var(--make-ai-drawer-width,
|
|
18
|
+
--make-ai-internal-shadow: 0 18px 48px #3549701f;
|
|
19
|
+
--make-ai-internal-overlay: #15233d;
|
|
20
|
+
--make-ai-internal-on-overlay: #fff;
|
|
21
|
+
--make-ai-internal-overlay-shadow: #3549701f;
|
|
22
|
+
--make-ai-internal-highlight: color-mix(in srgb, #fff 58%, transparent);
|
|
23
|
+
--make-ai-internal-drawer-min-width: var(--make-ai-drawer-width, 480px);
|
|
22
24
|
--make-ai-internal-drawer-width: var(--make-ai-internal-drawer-min-width);
|
|
23
25
|
--make-ai-internal-drawer-max-width: max(var(--make-ai-internal-drawer-min-width), min(1024px, 72vw));
|
|
24
26
|
--make-ai-internal-drawer-resize-line: var(--make-ai-drawer-resize-line, var(--make-ai-internal-accent));
|
|
25
27
|
--make-ai-internal-z-index: var(--make-ai-z-index, 1050);
|
|
26
|
-
--make-ai-internal-font-size-
|
|
27
|
-
--make-ai-internal-font-size-
|
|
28
|
-
--make-ai-internal-font-size-
|
|
29
|
-
--make-ai-internal-
|
|
28
|
+
--make-ai-internal-font-size-heading: var(--make-ai-font-size-heading, .875rem);
|
|
29
|
+
--make-ai-internal-font-size-body: var(--make-ai-font-size-body, .8125rem);
|
|
30
|
+
--make-ai-internal-font-size-markdown: var(--make-ai-font-size-markdown, .8125rem);
|
|
31
|
+
--make-ai-internal-font-size-meta: var(--make-ai-font-size-meta, .75rem);
|
|
32
|
+
--make-ai-internal-font-size-caption: var(--make-ai-font-size-caption, .6875rem);
|
|
33
|
+
--make-ai-internal-font-size-ui: var(--make-ai-font-size-ui, var(--make-ai-internal-font-size-caption));
|
|
34
|
+
--make-ai-internal-line-height-heading: var(--make-ai-line-height-heading, 1.43);
|
|
35
|
+
--make-ai-internal-line-height-body: var(--make-ai-line-height-body, 1.62);
|
|
36
|
+
--make-ai-internal-line-height-meta: var(--make-ai-line-height-meta, 1.5);
|
|
37
|
+
--make-ai-internal-line-height-caption: var(--make-ai-line-height-caption, 1.45);
|
|
30
38
|
--make-ai-internal-panel-gutter: var(--make-ai-panel-gutter, 16px);
|
|
31
39
|
--make-ai-internal-panel-gutter-compact: var(--make-ai-panel-gutter-compact, 12px);
|
|
32
40
|
--make-ai-internal-panel-gutter-wide: var(--make-ai-panel-gutter-wide, 24px);
|
|
33
41
|
--make-ai-internal-header-height: var(--make-ai-header-height, 50px);
|
|
34
42
|
--make-ai-internal-message-turn-gap: var(--make-ai-message-turn-gap, 8px);
|
|
35
|
-
--make-ai-internal-assistant-content-gap: var(--make-ai-assistant-content-gap,
|
|
43
|
+
--make-ai-internal-assistant-content-gap: var(--make-ai-assistant-content-gap, 8px);
|
|
44
|
+
--make-ai-internal-assistant-block-gap: var(--make-ai-assistant-block-gap, 12px);
|
|
36
45
|
}
|
|
37
46
|
|
|
38
47
|
.make-ai-assistant,
|
|
@@ -64,6 +73,7 @@
|
|
|
64
73
|
}
|
|
65
74
|
|
|
66
75
|
.make-ai-assistant__launcher {
|
|
76
|
+
--make-ai-internal-launcher-translate: translate3d(0, 0, 0);
|
|
67
77
|
align-items: center;
|
|
68
78
|
background:
|
|
69
79
|
radial-gradient(circle at 34% 24%, var(--make-ai-internal-highlight), transparent 31%),
|
|
@@ -79,7 +89,7 @@
|
|
|
79
89
|
);
|
|
80
90
|
border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 34%, var(--make-ai-internal-border));
|
|
81
91
|
border-radius: 50%;
|
|
82
|
-
bottom:
|
|
92
|
+
bottom: var(--make-ai-launcher-bottom, 18px);
|
|
83
93
|
box-shadow:
|
|
84
94
|
0 12px 26px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent),
|
|
85
95
|
0 0 0 6px color-mix(in srgb, var(--make-ai-internal-accent) 5%, transparent),
|
|
@@ -92,9 +102,10 @@
|
|
|
92
102
|
overflow: visible;
|
|
93
103
|
padding: 0;
|
|
94
104
|
position: fixed;
|
|
105
|
+
left: auto;
|
|
95
106
|
right: var(--make-ai-launcher-right, 18px);
|
|
96
|
-
top:
|
|
97
|
-
transform:
|
|
107
|
+
top: auto;
|
|
108
|
+
transform: var(--make-ai-internal-launcher-translate) scale(1);
|
|
98
109
|
transition:
|
|
99
110
|
box-shadow 180ms cubic-bezier(.25, 1, .5, 1),
|
|
100
111
|
transform 180ms cubic-bezier(.25, 1, .5, 1);
|
|
@@ -102,16 +113,52 @@
|
|
|
102
113
|
z-index: calc(var(--make-ai-internal-z-index) + 2);
|
|
103
114
|
}
|
|
104
115
|
|
|
116
|
+
.make-ai-assistant__launcher[data-launcher-position="bottom-left"] {
|
|
117
|
+
left: var(--make-ai-launcher-left, 18px);
|
|
118
|
+
right: auto;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.make-ai-assistant__launcher[data-launcher-position="bottom-right"] {
|
|
122
|
+
left: auto;
|
|
123
|
+
right: var(--make-ai-launcher-right, 18px);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.make-ai-assistant__launcher[data-launcher-position="top-left"] {
|
|
127
|
+
bottom: auto;
|
|
128
|
+
top: var(--make-ai-launcher-top, 18px);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.make-ai-assistant__launcher[data-launcher-position="top-right"] {
|
|
132
|
+
bottom: auto;
|
|
133
|
+
left: auto;
|
|
134
|
+
right: var(--make-ai-launcher-right, 18px);
|
|
135
|
+
top: var(--make-ai-launcher-top, 18px);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.make-ai-assistant__launcher[data-launcher-position="left-center"] {
|
|
139
|
+
--make-ai-internal-launcher-translate: translateY(-50%);
|
|
140
|
+
bottom: auto;
|
|
141
|
+
top: var(--make-ai-launcher-top, 50%);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.make-ai-assistant__launcher[data-launcher-position="right-center"] {
|
|
145
|
+
--make-ai-internal-launcher-translate: translateY(-50%);
|
|
146
|
+
bottom: auto;
|
|
147
|
+
left: auto;
|
|
148
|
+
right: var(--make-ai-launcher-right, 18px);
|
|
149
|
+
top: var(--make-ai-launcher-top, 50%);
|
|
150
|
+
}
|
|
151
|
+
|
|
105
152
|
.make-ai-assistant__launcher:hover {
|
|
106
153
|
box-shadow:
|
|
107
154
|
0 14px 30px color-mix(in srgb, var(--make-ai-internal-accent) 17%, transparent),
|
|
108
155
|
0 0 0 8px color-mix(in srgb, var(--make-ai-internal-accent) 7%, transparent),
|
|
109
156
|
inset 0 1px 0 var(--make-ai-internal-highlight);
|
|
110
|
-
transform:
|
|
157
|
+
transform: var(--make-ai-internal-launcher-translate) scale(1.04);
|
|
111
158
|
}
|
|
112
159
|
|
|
113
160
|
.make-ai-assistant__launcher:active {
|
|
114
|
-
transform:
|
|
161
|
+
transform: var(--make-ai-internal-launcher-translate) scale(.98);
|
|
115
162
|
}
|
|
116
163
|
|
|
117
164
|
.make-ai-assistant__launcher:focus-visible,
|
|
@@ -233,6 +280,7 @@
|
|
|
233
280
|
|
|
234
281
|
.make-ai-assistant__header {
|
|
235
282
|
align-items: center;
|
|
283
|
+
background: var(--make-ai-internal-surface);
|
|
236
284
|
border-bottom: 1px solid var(--make-ai-internal-border);
|
|
237
285
|
display: grid;
|
|
238
286
|
gap: 8px;
|
|
@@ -252,7 +300,7 @@
|
|
|
252
300
|
}
|
|
253
301
|
|
|
254
302
|
.make-ai-assistant__header h2 {
|
|
255
|
-
font-size:
|
|
303
|
+
font-size: var(--make-ai-internal-font-size-heading);
|
|
256
304
|
font-weight: 700;
|
|
257
305
|
letter-spacing: 0;
|
|
258
306
|
line-height: 18px;
|
|
@@ -260,7 +308,7 @@
|
|
|
260
308
|
|
|
261
309
|
.make-ai-assistant__header p {
|
|
262
310
|
color: var(--make-ai-internal-text-secondary);
|
|
263
|
-
font-size:
|
|
311
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
264
312
|
line-height: 14px;
|
|
265
313
|
}
|
|
266
314
|
|
|
@@ -343,9 +391,9 @@
|
|
|
343
391
|
border-radius: 5px;
|
|
344
392
|
color: color-mix(in srgb, var(--make-ai-internal-accent) 82%, var(--make-ai-internal-text));
|
|
345
393
|
flex: 0 0 auto;
|
|
346
|
-
font-size:
|
|
394
|
+
font-size: var(--make-ai-internal-font-size-caption);
|
|
347
395
|
font-weight: 650;
|
|
348
|
-
line-height:
|
|
396
|
+
line-height: var(--make-ai-internal-line-height-caption);
|
|
349
397
|
padding: 0 5px;
|
|
350
398
|
}
|
|
351
399
|
|
|
@@ -393,9 +441,9 @@
|
|
|
393
441
|
border-radius: 8px;
|
|
394
442
|
box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
|
|
395
443
|
color: var(--make-ai-internal-on-overlay);
|
|
396
|
-
font-size:
|
|
444
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
397
445
|
font-weight: 500;
|
|
398
|
-
line-height:
|
|
446
|
+
line-height: var(--make-ai-internal-line-height-meta);
|
|
399
447
|
max-height: calc(100vh - 32px);
|
|
400
448
|
max-width: min(280px, calc(100vw - 32px));
|
|
401
449
|
opacity: 0;
|
|
@@ -418,6 +466,7 @@
|
|
|
418
466
|
}
|
|
419
467
|
|
|
420
468
|
.make-ai-assistant__body {
|
|
469
|
+
background: var(--make-ai-internal-bg);
|
|
421
470
|
grid-row: 2;
|
|
422
471
|
min-height: 0;
|
|
423
472
|
min-width: 0;
|
|
@@ -509,10 +558,10 @@
|
|
|
509
558
|
|
|
510
559
|
.make-ai-assistant__load-failure-label {
|
|
511
560
|
color: var(--make-ai-load-failure-accent);
|
|
512
|
-
font-size:
|
|
561
|
+
font-size: var(--make-ai-internal-font-size-caption);
|
|
513
562
|
font-weight: 700;
|
|
514
563
|
letter-spacing: .04em;
|
|
515
|
-
line-height:
|
|
564
|
+
line-height: var(--make-ai-internal-line-height-caption);
|
|
516
565
|
}
|
|
517
566
|
|
|
518
567
|
.make-ai-assistant__load-failure h3,
|
|
@@ -522,15 +571,15 @@
|
|
|
522
571
|
|
|
523
572
|
.make-ai-assistant__load-failure h3 {
|
|
524
573
|
color: var(--make-ai-internal-text);
|
|
525
|
-
font-size:
|
|
574
|
+
font-size: var(--make-ai-internal-font-size-heading);
|
|
526
575
|
font-weight: 700;
|
|
527
|
-
line-height:
|
|
576
|
+
line-height: var(--make-ai-internal-line-height-heading);
|
|
528
577
|
}
|
|
529
578
|
|
|
530
579
|
.make-ai-assistant__load-failure p {
|
|
531
580
|
color: var(--make-ai-internal-text-secondary);
|
|
532
581
|
font-size: var(--make-ai-internal-font-size-body);
|
|
533
|
-
line-height:
|
|
582
|
+
line-height: var(--make-ai-internal-line-height-body);
|
|
534
583
|
}
|
|
535
584
|
|
|
536
585
|
.make-ai-assistant__message {
|
|
@@ -589,13 +638,13 @@
|
|
|
589
638
|
|
|
590
639
|
.make-ai-assistant__message-sender {
|
|
591
640
|
color: var(--make-ai-internal-text-secondary);
|
|
592
|
-
font-size:
|
|
641
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
593
642
|
font-weight: 600;
|
|
594
|
-
line-height:
|
|
643
|
+
line-height: var(--make-ai-internal-line-height-meta);
|
|
595
644
|
}
|
|
596
645
|
|
|
597
646
|
.make-ai-assistant__message--user .make-ai-assistant__message-sender {
|
|
598
|
-
color:
|
|
647
|
+
color: var(--make-ai-internal-text);
|
|
599
648
|
}
|
|
600
649
|
|
|
601
650
|
.make-ai-assistant__avatar--message,
|
|
@@ -633,10 +682,12 @@
|
|
|
633
682
|
}
|
|
634
683
|
|
|
635
684
|
.make-ai-assistant__message--user .make-ai-assistant__bubble {
|
|
636
|
-
background:
|
|
637
|
-
border: 1px solid
|
|
685
|
+
background: var(--make-ai-internal-user-message-bg);
|
|
686
|
+
border: 1px solid var(--make-ai-internal-user-message-bg);
|
|
638
687
|
border-radius: 16px 5px 16px 16px;
|
|
639
|
-
color:
|
|
688
|
+
color: var(--make-ai-internal-user-message-text);
|
|
689
|
+
font-size: var(--make-ai-internal-font-size-heading);
|
|
690
|
+
line-height: var(--make-ai-internal-line-height-heading);
|
|
640
691
|
padding: 10px 13px;
|
|
641
692
|
white-space: pre-wrap;
|
|
642
693
|
}
|
|
@@ -644,8 +695,8 @@
|
|
|
644
695
|
.make-ai-assistant__assistant-text {
|
|
645
696
|
display: grid;
|
|
646
697
|
font-size: var(--make-ai-internal-font-size-markdown);
|
|
647
|
-
gap:
|
|
648
|
-
line-height:
|
|
698
|
+
gap: var(--make-ai-internal-assistant-block-gap);
|
|
699
|
+
line-height: var(--make-ai-internal-line-height-body);
|
|
649
700
|
max-width: 100%;
|
|
650
701
|
white-space: normal;
|
|
651
702
|
width: 100%;
|
|
@@ -663,12 +714,12 @@
|
|
|
663
714
|
background: transparent;
|
|
664
715
|
border: 0;
|
|
665
716
|
border-left: 3px solid color-mix(in srgb, var(--make-ai-internal-accent) 68%, var(--make-ai-internal-border));
|
|
666
|
-
color:
|
|
717
|
+
color: var(--make-ai-internal-text);
|
|
667
718
|
display: block;
|
|
668
|
-
font-size:
|
|
719
|
+
font-size: var(--make-ai-internal-font-size-heading);
|
|
669
720
|
font-weight: 720;
|
|
670
721
|
letter-spacing: -.01em;
|
|
671
|
-
line-height:
|
|
722
|
+
line-height: var(--make-ai-internal-line-height-heading);
|
|
672
723
|
min-width: 0;
|
|
673
724
|
padding: 0 0 0 8px;
|
|
674
725
|
}
|
|
@@ -678,7 +729,7 @@
|
|
|
678
729
|
.make-ai-assistant__markdown-heading--5,
|
|
679
730
|
.make-ai-assistant__markdown-heading--6 {
|
|
680
731
|
color: color-mix(in srgb, var(--make-ai-internal-text) 90%, var(--make-ai-internal-accent));
|
|
681
|
-
font-size:
|
|
732
|
+
font-size: var(--make-ai-internal-font-size-heading);
|
|
682
733
|
font-weight: 680;
|
|
683
734
|
}
|
|
684
735
|
|
|
@@ -711,7 +762,7 @@
|
|
|
711
762
|
}
|
|
712
763
|
|
|
713
764
|
.make-ai-assistant__assistant-text strong {
|
|
714
|
-
color:
|
|
765
|
+
color: var(--make-ai-internal-text);
|
|
715
766
|
font-weight: 650;
|
|
716
767
|
}
|
|
717
768
|
|
|
@@ -719,7 +770,7 @@
|
|
|
719
770
|
background: color-mix(in srgb, var(--make-ai-internal-surface-strong) 78%, var(--make-ai-internal-bg));
|
|
720
771
|
border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 78%, transparent);
|
|
721
772
|
border-radius: 5px;
|
|
722
|
-
color:
|
|
773
|
+
color: var(--make-ai-internal-text);
|
|
723
774
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
|
|
724
775
|
font-size: 1em;
|
|
725
776
|
padding: .05rem .25rem;
|
|
@@ -795,7 +846,7 @@
|
|
|
795
846
|
|
|
796
847
|
.make-ai-assistant__markdown-table th {
|
|
797
848
|
background: color-mix(in srgb, var(--make-ai-internal-surface) 72%, var(--make-ai-internal-bg));
|
|
798
|
-
color:
|
|
849
|
+
color: var(--make-ai-internal-text);
|
|
799
850
|
font-weight: 680;
|
|
800
851
|
white-space: nowrap;
|
|
801
852
|
}
|
|
@@ -842,7 +893,7 @@
|
|
|
842
893
|
flex-direction: column;
|
|
843
894
|
font-size: var(--make-ai-internal-font-size-body);
|
|
844
895
|
gap: 4px;
|
|
845
|
-
line-height:
|
|
896
|
+
line-height: var(--make-ai-internal-line-height-body);
|
|
846
897
|
overflow-wrap: anywhere;
|
|
847
898
|
padding: 10px 12px;
|
|
848
899
|
}
|
|
@@ -858,8 +909,9 @@
|
|
|
858
909
|
align-items: center;
|
|
859
910
|
color: var(--make-ai-internal-danger);
|
|
860
911
|
display: flex;
|
|
912
|
+
font-size: var(--make-ai-internal-font-size-heading);
|
|
861
913
|
gap: 8px;
|
|
862
|
-
line-height:
|
|
914
|
+
line-height: var(--make-ai-internal-line-height-heading);
|
|
863
915
|
}
|
|
864
916
|
|
|
865
917
|
.make-ai-assistant__message-status-icon {
|
|
@@ -893,9 +945,9 @@
|
|
|
893
945
|
color: var(--make-ai-internal-text-secondary);
|
|
894
946
|
display: flex;
|
|
895
947
|
flex: 1;
|
|
896
|
-
font-size:
|
|
948
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
897
949
|
gap: 7px;
|
|
898
|
-
line-height:
|
|
950
|
+
line-height: var(--make-ai-internal-line-height-meta);
|
|
899
951
|
min-width: 0;
|
|
900
952
|
min-height: 24px;
|
|
901
953
|
}
|
|
@@ -919,8 +971,8 @@
|
|
|
919
971
|
border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 88%, transparent);
|
|
920
972
|
border-radius: 10px;
|
|
921
973
|
color: var(--make-ai-internal-text-secondary);
|
|
922
|
-
font-size:
|
|
923
|
-
line-height:
|
|
974
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
975
|
+
line-height: var(--make-ai-internal-line-height-meta);
|
|
924
976
|
overflow: hidden;
|
|
925
977
|
overflow-wrap: anywhere;
|
|
926
978
|
}
|
|
@@ -958,7 +1010,7 @@
|
|
|
958
1010
|
.make-ai-assistant__process-count {
|
|
959
1011
|
color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 78%, var(--make-ai-internal-bg));
|
|
960
1012
|
flex: 0 0 auto;
|
|
961
|
-
font-size:
|
|
1013
|
+
font-size: var(--make-ai-internal-font-size-caption);
|
|
962
1014
|
margin-left: auto;
|
|
963
1015
|
}
|
|
964
1016
|
|
|
@@ -991,6 +1043,9 @@
|
|
|
991
1043
|
}
|
|
992
1044
|
|
|
993
1045
|
.make-ai-assistant__process li > span:last-child {
|
|
1046
|
+
color: var(--make-ai-internal-text);
|
|
1047
|
+
font-size: var(--make-ai-internal-font-size-body);
|
|
1048
|
+
line-height: var(--make-ai-internal-line-height-body);
|
|
994
1049
|
min-width: 0;
|
|
995
1050
|
overflow-wrap: anywhere;
|
|
996
1051
|
}
|
|
@@ -1045,10 +1100,10 @@
|
|
|
1045
1100
|
box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
|
|
1046
1101
|
color: var(--make-ai-internal-on-overlay);
|
|
1047
1102
|
content: attr(data-tooltip);
|
|
1048
|
-
font-size:
|
|
1103
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
1049
1104
|
font-weight: 600;
|
|
1050
1105
|
left: 50%;
|
|
1051
|
-
line-height:
|
|
1106
|
+
line-height: var(--make-ai-internal-line-height-meta);
|
|
1052
1107
|
opacity: 0;
|
|
1053
1108
|
padding: 6px 8px;
|
|
1054
1109
|
pointer-events: none;
|
|
@@ -1131,7 +1186,7 @@
|
|
|
1131
1186
|
color: var(--make-ai-internal-danger);
|
|
1132
1187
|
cursor: pointer;
|
|
1133
1188
|
display: inline-flex;
|
|
1134
|
-
font-size:
|
|
1189
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
1135
1190
|
font-weight: 600;
|
|
1136
1191
|
gap: 6px;
|
|
1137
1192
|
margin-top: 4px;
|
|
@@ -1173,7 +1228,7 @@
|
|
|
1173
1228
|
}
|
|
1174
1229
|
|
|
1175
1230
|
.make-ai-assistant__composer-region {
|
|
1176
|
-
background:
|
|
1231
|
+
background: var(--make-ai-internal-bg);
|
|
1177
1232
|
border-top: 1px solid var(--make-ai-internal-border);
|
|
1178
1233
|
grid-row: 3;
|
|
1179
1234
|
box-shadow: 0 -8px 18px color-mix(in srgb, var(--make-ai-internal-accent) 3%, transparent);
|
|
@@ -1195,7 +1250,7 @@
|
|
|
1195
1250
|
color: var(--make-ai-internal-text-secondary);
|
|
1196
1251
|
cursor: pointer;
|
|
1197
1252
|
flex: 0 0 auto;
|
|
1198
|
-
font-size:
|
|
1253
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
1199
1254
|
padding: 7px 10px;
|
|
1200
1255
|
}
|
|
1201
1256
|
|
|
@@ -1206,8 +1261,8 @@
|
|
|
1206
1261
|
|
|
1207
1262
|
.make-ai-assistant__composer {
|
|
1208
1263
|
align-items: flex-end;
|
|
1209
|
-
background:
|
|
1210
|
-
border: 1px solid
|
|
1264
|
+
background: var(--make-ai-internal-surface);
|
|
1265
|
+
border: 1px solid var(--make-ai-internal-border);
|
|
1211
1266
|
border-radius: 15px;
|
|
1212
1267
|
display: flex;
|
|
1213
1268
|
gap: 9px;
|
|
@@ -1217,7 +1272,7 @@
|
|
|
1217
1272
|
}
|
|
1218
1273
|
|
|
1219
1274
|
.make-ai-assistant__composer:focus-within {
|
|
1220
|
-
background: var(--make-ai-internal-
|
|
1275
|
+
background: var(--make-ai-internal-surface);
|
|
1221
1276
|
border-color: color-mix(in srgb, var(--make-ai-internal-accent) 42%, var(--make-ai-internal-border));
|
|
1222
1277
|
box-shadow:
|
|
1223
1278
|
0 0 0 2px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent),
|
|
@@ -1229,7 +1284,7 @@
|
|
|
1229
1284
|
border: 0;
|
|
1230
1285
|
color: var(--make-ai-internal-text);
|
|
1231
1286
|
font-size: var(--make-ai-internal-font-size-body);
|
|
1232
|
-
line-height:
|
|
1287
|
+
line-height: var(--make-ai-internal-line-height-body);
|
|
1233
1288
|
max-height: 112px;
|
|
1234
1289
|
min-height: 38px;
|
|
1235
1290
|
outline: 0;
|
|
@@ -1296,8 +1351,8 @@
|
|
|
1296
1351
|
|
|
1297
1352
|
.make-ai-assistant__composer-region > p {
|
|
1298
1353
|
color: var(--make-ai-internal-text-secondary);
|
|
1299
|
-
font-size:
|
|
1300
|
-
line-height:
|
|
1354
|
+
font-size: var(--make-ai-internal-font-size-caption);
|
|
1355
|
+
line-height: var(--make-ai-internal-line-height-caption);
|
|
1301
1356
|
margin: 7px 0 0;
|
|
1302
1357
|
text-align: center;
|
|
1303
1358
|
}
|
|
@@ -1307,6 +1362,8 @@
|
|
|
1307
1362
|
border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 86%, transparent);
|
|
1308
1363
|
border-radius: var(--make-ai-internal-radius);
|
|
1309
1364
|
container-type: inline-size;
|
|
1365
|
+
font-size: var(--make-ai-internal-font-size-body);
|
|
1366
|
+
line-height: var(--make-ai-internal-line-height-body);
|
|
1310
1367
|
overflow: hidden;
|
|
1311
1368
|
padding: 14px;
|
|
1312
1369
|
width: 100%;
|
|
@@ -1322,19 +1379,25 @@
|
|
|
1322
1379
|
}
|
|
1323
1380
|
|
|
1324
1381
|
.make-ai-artifact__title {
|
|
1325
|
-
font-size: var(--make-ai-internal-font-size-
|
|
1382
|
+
font-size: var(--make-ai-internal-font-size-heading);
|
|
1326
1383
|
font-weight: 600;
|
|
1327
|
-
line-height:
|
|
1384
|
+
line-height: var(--make-ai-internal-line-height-heading);
|
|
1328
1385
|
margin: 0;
|
|
1329
1386
|
}
|
|
1330
1387
|
|
|
1331
1388
|
.make-ai-artifact__summary,
|
|
1332
|
-
.make-ai-artifact__context
|
|
1389
|
+
.make-ai-artifact__context {
|
|
1390
|
+
color: var(--make-ai-internal-text-secondary);
|
|
1391
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
1392
|
+
line-height: var(--make-ai-internal-line-height-meta);
|
|
1393
|
+
margin: 6px 0 0;
|
|
1394
|
+
}
|
|
1395
|
+
|
|
1333
1396
|
.make-ai-artifact__record-total {
|
|
1334
1397
|
color: var(--make-ai-internal-text-secondary);
|
|
1335
|
-
font-size:
|
|
1336
|
-
line-height:
|
|
1337
|
-
margin:
|
|
1398
|
+
font-size: var(--make-ai-internal-font-size-caption);
|
|
1399
|
+
line-height: var(--make-ai-internal-line-height-caption);
|
|
1400
|
+
margin: 6px 0 0;
|
|
1338
1401
|
}
|
|
1339
1402
|
|
|
1340
1403
|
.make-ai-artifact__metric-value {
|
|
@@ -1350,7 +1413,7 @@
|
|
|
1350
1413
|
align-items: center;
|
|
1351
1414
|
color: var(--make-ai-internal-text-secondary);
|
|
1352
1415
|
display: flex;
|
|
1353
|
-
font-size:
|
|
1416
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
1354
1417
|
gap: 4px;
|
|
1355
1418
|
margin-top: 5px;
|
|
1356
1419
|
}
|
|
@@ -1373,7 +1436,7 @@
|
|
|
1373
1436
|
color: var(--make-ai-internal-accent);
|
|
1374
1437
|
cursor: pointer;
|
|
1375
1438
|
display: inline-flex;
|
|
1376
|
-
font-size:
|
|
1439
|
+
font-size: var(--make-ai-internal-font-size-meta);
|
|
1377
1440
|
font-weight: 600;
|
|
1378
1441
|
gap: 5px;
|
|
1379
1442
|
padding: 3px 0;
|
|
@@ -1411,21 +1474,23 @@
|
|
|
1411
1474
|
|
|
1412
1475
|
.make-ai-artifact__comparison-item:first-child { border-left: 0; padding-left: 0; }
|
|
1413
1476
|
.make-ai-artifact__comparison-item span,
|
|
1414
|
-
.make-ai-artifact__comparison-item small { color: var(--make-ai-internal-text-secondary);
|
|
1477
|
+
.make-ai-artifact__comparison-item small { color: var(--make-ai-internal-text-secondary); }
|
|
1478
|
+
.make-ai-artifact__comparison-item span { font-size: var(--make-ai-internal-font-size-meta); line-height: var(--make-ai-internal-line-height-meta); }
|
|
1479
|
+
.make-ai-artifact__comparison-item small { font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); }
|
|
1415
1480
|
.make-ai-artifact__comparison-item strong { font-size: 18px; }
|
|
1416
1481
|
|
|
1417
1482
|
.make-ai-artifact__trend { margin-top: 12px; }
|
|
1418
|
-
.make-ai-artifact__trend-label { color: var(--make-ai-internal-text-secondary); font-size:
|
|
1483
|
+
.make-ai-artifact__trend-label { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-meta); line-height: var(--make-ai-internal-line-height-meta); margin-bottom: 8px; }
|
|
1419
1484
|
.make-ai-artifact__trend-bars { align-items: flex-end; display: flex; gap: 5px; height: 112px; }
|
|
1420
1485
|
.make-ai-artifact__trend-point { align-items: center; display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: flex-end; min-width: 0; }
|
|
1421
1486
|
.make-ai-artifact__trend-bar { background: var(--make-ai-internal-accent); border-radius: 4px 4px 1px 1px; min-height: 4px; width: min(18px, 70%); }
|
|
1422
|
-
.make-ai-artifact__trend-point small { color: var(--make-ai-internal-text-secondary); font-size:
|
|
1487
|
+
.make-ai-artifact__trend-point small { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
|
|
1423
1488
|
|
|
1424
1489
|
.make-ai-artifact__ranking { list-style: none; margin: 12px 0 0; padding: 0; }
|
|
1425
|
-
.make-ai-artifact__ranking li { align-items: center; display: grid; font-size:
|
|
1426
|
-
.make-ai-artifact__rank { align-items: center; background: var(--make-ai-internal-surface-strong); border-radius: 6px; color: var(--make-ai-internal-text-secondary); display: flex; height: 20px; justify-content: center; }
|
|
1490
|
+
.make-ai-artifact__ranking li { align-items: center; display: grid; font-size: var(--make-ai-internal-font-size-body); gap: 8px; grid-template-columns: 20px minmax(72px, auto) minmax(40px, 1fr) auto; margin-top: 9px; }
|
|
1491
|
+
.make-ai-artifact__rank { align-items: center; background: var(--make-ai-internal-surface-strong); border-radius: 6px; color: var(--make-ai-internal-text-secondary); display: flex; font-size: var(--make-ai-internal-font-size-meta); height: 20px; justify-content: center; }
|
|
1427
1492
|
.make-ai-artifact__ranking-label { display: flex; flex-direction: column; min-width: 0; }
|
|
1428
|
-
.make-ai-artifact__ranking-label small { color: var(--make-ai-internal-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1493
|
+
.make-ai-artifact__ranking-label small { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1429
1494
|
.make-ai-artifact__ranking-track { background: var(--make-ai-internal-surface-strong); border-radius: 999px; height: 5px; overflow: hidden; }
|
|
1430
1495
|
.make-ai-artifact__ranking-track span { background: var(--make-ai-internal-accent); border-radius: inherit; display: block; height: 100%; }
|
|
1431
1496
|
|
|
@@ -1435,10 +1500,10 @@ button.make-ai-artifact__record { cursor: pointer; }
|
|
|
1435
1500
|
button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accent-soft); }
|
|
1436
1501
|
.make-ai-artifact__record-values { display: flex; gap: 12px; min-width: 0; }
|
|
1437
1502
|
.make-ai-artifact__record-values > span { display: flex; flex: 1; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1438
|
-
.make-ai-artifact__record-values small { color: var(--make-ai-internal-text-secondary); font-size:
|
|
1439
|
-
.make-ai-artifact__empty { color: var(--make-ai-internal-text-secondary); font-size:
|
|
1503
|
+
.make-ai-artifact__record-values small { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-caption); line-height: var(--make-ai-internal-line-height-caption); }
|
|
1504
|
+
.make-ai-artifact__empty { color: var(--make-ai-internal-text-secondary); font-size: var(--make-ai-internal-font-size-meta); line-height: var(--make-ai-internal-line-height-meta); text-align: center; }
|
|
1440
1505
|
|
|
1441
|
-
.make-ai-artifact__notice { align-items: flex-start; display: flex; font-size:
|
|
1506
|
+
.make-ai-artifact__notice { align-items: flex-start; display: flex; font-size: var(--make-ai-internal-font-size-meta); gap: 9px; line-height: var(--make-ai-internal-line-height-meta); margin-top: 8px; }
|
|
1442
1507
|
.make-ai-artifact__notice > span { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: flex; flex: 0 0 auto; height: 20px; justify-content: center; margin-top: 1px; width: 20px; }
|
|
1443
1508
|
.make-ai-artifact__notice p { margin: 0; }
|
|
1444
1509
|
.make-ai-artifact__notice--success { color: var(--make-ai-internal-success); }
|
|
@@ -1446,7 +1511,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
|
|
|
1446
1511
|
.make-ai-artifact__notice--danger { color: var(--make-ai-internal-danger); }
|
|
1447
1512
|
.make-ai-artifact__notice--info { color: var(--make-ai-internal-accent); }
|
|
1448
1513
|
|
|
1449
|
-
.make-ai-artifact--unsupported { color: var(--make-ai-internal-text-secondary); display: flex; flex-direction: column; font-size:
|
|
1514
|
+
.make-ai-artifact--unsupported { color: var(--make-ai-internal-text-secondary); display: flex; flex-direction: column; font-size: var(--make-ai-internal-font-size-meta); gap: 3px; line-height: var(--make-ai-internal-line-height-meta); }
|
|
1450
1515
|
|
|
1451
1516
|
@keyframes make-ai-pulse {
|
|
1452
1517
|
0% { opacity: .75; transform: scale(.92); }
|
|
@@ -1621,7 +1686,40 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
|
|
|
1621
1686
|
@media (max-width: 560px) {
|
|
1622
1687
|
.make-ai-assistant__drawer { width: 100vw; }
|
|
1623
1688
|
.make-ai-assistant__drawer-resize-handle { display: none; }
|
|
1624
|
-
.make-ai-assistant__launcher {
|
|
1689
|
+
.make-ai-assistant__launcher {
|
|
1690
|
+
bottom: var(--make-ai-launcher-mobile-bottom, var(--make-ai-launcher-bottom, 16px));
|
|
1691
|
+
left: auto;
|
|
1692
|
+
right: var(--make-ai-launcher-mobile-right, var(--make-ai-launcher-right, 16px));
|
|
1693
|
+
top: auto;
|
|
1694
|
+
}
|
|
1695
|
+
.make-ai-assistant__launcher[data-launcher-position="bottom-left"] {
|
|
1696
|
+
left: var(--make-ai-launcher-mobile-left, var(--make-ai-launcher-left, 16px));
|
|
1697
|
+
right: auto;
|
|
1698
|
+
}
|
|
1699
|
+
.make-ai-assistant__launcher[data-launcher-position="bottom-right"] {
|
|
1700
|
+
left: auto;
|
|
1701
|
+
right: var(--make-ai-launcher-mobile-right, var(--make-ai-launcher-right, 16px));
|
|
1702
|
+
}
|
|
1703
|
+
.make-ai-assistant__launcher[data-launcher-position="top-left"] {
|
|
1704
|
+
bottom: auto;
|
|
1705
|
+
top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 16px));
|
|
1706
|
+
}
|
|
1707
|
+
.make-ai-assistant__launcher[data-launcher-position="top-right"] {
|
|
1708
|
+
bottom: auto;
|
|
1709
|
+
left: auto;
|
|
1710
|
+
right: var(--make-ai-launcher-mobile-right, var(--make-ai-launcher-right, 16px));
|
|
1711
|
+
top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 16px));
|
|
1712
|
+
}
|
|
1713
|
+
.make-ai-assistant__launcher[data-launcher-position="left-center"] {
|
|
1714
|
+
bottom: auto;
|
|
1715
|
+
top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 50%));
|
|
1716
|
+
}
|
|
1717
|
+
.make-ai-assistant__launcher[data-launcher-position="right-center"] {
|
|
1718
|
+
bottom: auto;
|
|
1719
|
+
left: auto;
|
|
1720
|
+
right: var(--make-ai-launcher-mobile-right, var(--make-ai-launcher-right, 16px));
|
|
1721
|
+
top: var(--make-ai-launcher-mobile-top, var(--make-ai-launcher-top, 50%));
|
|
1722
|
+
}
|
|
1625
1723
|
.make-ai-artifact__record {
|
|
1626
1724
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
1627
1725
|
}
|
package/package.json
CHANGED