@qfei-design/make-ai-assistant 0.1.8 → 0.1.9
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 +17 -9
- package/README.md +19 -8
- package/dist/react/make-ai-assistant.d.ts +1 -1
- package/dist/react.cjs +4 -4
- package/dist/react.mjs +656 -582
- package/dist/styles.css +142 -19
- package/package.ai.json +4 -4
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -51,27 +51,48 @@
|
|
|
51
51
|
|
|
52
52
|
.make-ai-assistant__launcher {
|
|
53
53
|
align-items: center;
|
|
54
|
-
background:
|
|
55
|
-
|
|
54
|
+
background:
|
|
55
|
+
radial-gradient(circle at 34% 24%, rgb(255 255 255 / 34%), transparent 31%),
|
|
56
|
+
linear-gradient(
|
|
57
|
+
145deg,
|
|
58
|
+
color-mix(in srgb, var(--make-ai-internal-accent) 88%, #7d76ff),
|
|
59
|
+
var(--make-ai-internal-accent-strong)
|
|
60
|
+
);
|
|
61
|
+
border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 54%, var(--make-ai-internal-border));
|
|
56
62
|
border-radius: 50%;
|
|
57
|
-
bottom:
|
|
58
|
-
box-shadow:
|
|
63
|
+
bottom: auto;
|
|
64
|
+
box-shadow:
|
|
65
|
+
0 14px 30px color-mix(in srgb, var(--make-ai-internal-accent) 18%, transparent),
|
|
66
|
+
0 0 0 6px color-mix(in srgb, var(--make-ai-internal-accent) 7%, transparent),
|
|
67
|
+
inset 0 1px 0 rgb(255 255 255 / 38%);
|
|
59
68
|
color: #fcfcff;
|
|
60
69
|
cursor: pointer;
|
|
61
70
|
display: flex;
|
|
62
71
|
height: 50px;
|
|
63
72
|
justify-content: center;
|
|
73
|
+
overflow: visible;
|
|
64
74
|
padding: 0;
|
|
65
75
|
position: fixed;
|
|
66
|
-
right:
|
|
67
|
-
|
|
76
|
+
right: var(--make-ai-launcher-right, 18px);
|
|
77
|
+
top: var(--make-ai-launcher-top, 50%);
|
|
78
|
+
transform: translateY(-50%);
|
|
79
|
+
transition:
|
|
80
|
+
box-shadow 180ms cubic-bezier(.25, 1, .5, 1),
|
|
81
|
+
transform 180ms cubic-bezier(.25, 1, .5, 1);
|
|
68
82
|
width: 50px;
|
|
69
83
|
z-index: calc(var(--make-ai-internal-z-index) + 2);
|
|
70
84
|
}
|
|
71
85
|
|
|
72
86
|
.make-ai-assistant__launcher:hover {
|
|
73
|
-
box-shadow:
|
|
74
|
-
|
|
87
|
+
box-shadow:
|
|
88
|
+
0 16px 34px color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent),
|
|
89
|
+
0 0 0 8px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent),
|
|
90
|
+
inset 0 1px 0 rgb(255 255 255 / 44%);
|
|
91
|
+
transform: translateY(-50%) scale(1.04);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.make-ai-assistant__launcher:active {
|
|
95
|
+
transform: translateY(-50%) scale(.98);
|
|
75
96
|
}
|
|
76
97
|
|
|
77
98
|
.make-ai-assistant__launcher:focus-visible,
|
|
@@ -84,20 +105,44 @@
|
|
|
84
105
|
.make-ai-assistant__launcher > svg {
|
|
85
106
|
fill: none;
|
|
86
107
|
height: 26px;
|
|
108
|
+
position: relative;
|
|
87
109
|
stroke: currentColor;
|
|
88
110
|
stroke-linecap: round;
|
|
89
111
|
stroke-linejoin: round;
|
|
90
112
|
stroke-width: 1.75;
|
|
113
|
+
transform-origin: center;
|
|
114
|
+
transition: transform 180ms cubic-bezier(.25, 1, .5, 1);
|
|
91
115
|
width: 26px;
|
|
116
|
+
z-index: 1;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.make-ai-assistant__launcher:hover > svg {
|
|
120
|
+
transform: rotate(8deg) scale(1.03);
|
|
92
121
|
}
|
|
93
122
|
|
|
94
123
|
.make-ai-assistant__launcher-orbit {
|
|
95
|
-
|
|
124
|
+
animation: make-ai-launcher-orbit 6s linear infinite, make-ai-launcher-breathe 2.8s cubic-bezier(.25, 1, .5, 1) infinite;
|
|
125
|
+
border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent);
|
|
96
126
|
border-radius: 50%;
|
|
97
|
-
inset: -
|
|
127
|
+
inset: -6px;
|
|
128
|
+
opacity: .78;
|
|
129
|
+
pointer-events: none;
|
|
98
130
|
position: absolute;
|
|
99
131
|
}
|
|
100
132
|
|
|
133
|
+
.make-ai-assistant__launcher-orbit::before {
|
|
134
|
+
background: color-mix(in srgb, var(--make-ai-internal-accent) 72%, #fcfcff);
|
|
135
|
+
border-radius: 50%;
|
|
136
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent);
|
|
137
|
+
content: "";
|
|
138
|
+
height: 5px;
|
|
139
|
+
left: 50%;
|
|
140
|
+
position: absolute;
|
|
141
|
+
top: -2px;
|
|
142
|
+
transform: translateX(-50%);
|
|
143
|
+
width: 5px;
|
|
144
|
+
}
|
|
145
|
+
|
|
101
146
|
.make-ai-assistant__drawer {
|
|
102
147
|
background: var(--make-ai-internal-bg);
|
|
103
148
|
border-left: 1px solid var(--make-ai-internal-border);
|
|
@@ -410,11 +455,50 @@
|
|
|
410
455
|
}
|
|
411
456
|
|
|
412
457
|
.make-ai-assistant__assistant-text p,
|
|
458
|
+
.make-ai-assistant__assistant-text .make-ai-assistant__markdown-heading,
|
|
413
459
|
.make-ai-assistant__assistant-text ul,
|
|
414
460
|
.make-ai-assistant__assistant-text pre {
|
|
415
461
|
margin: 0;
|
|
416
462
|
}
|
|
417
463
|
|
|
464
|
+
.make-ai-assistant__markdown-heading {
|
|
465
|
+
align-items: center;
|
|
466
|
+
background: color-mix(in srgb, var(--make-ai-internal-accent) 4%, var(--make-ai-internal-surface));
|
|
467
|
+
border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 8%, var(--make-ai-internal-border));
|
|
468
|
+
border-radius: 9px;
|
|
469
|
+
box-shadow: inset 0 1px 0 rgb(255 255 255 / 54%);
|
|
470
|
+
color: color-mix(in srgb, var(--make-ai-internal-text) 94%, var(--make-ai-internal-accent));
|
|
471
|
+
display: flex;
|
|
472
|
+
font-size: 1.04em;
|
|
473
|
+
font-weight: 720;
|
|
474
|
+
gap: 6px;
|
|
475
|
+
letter-spacing: -.01em;
|
|
476
|
+
line-height: 1.45;
|
|
477
|
+
min-width: 0;
|
|
478
|
+
padding: 4px 8px 4px 12px;
|
|
479
|
+
position: relative;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.make-ai-assistant__markdown-heading::before {
|
|
483
|
+
background: color-mix(in srgb, var(--make-ai-internal-accent) 62%, var(--make-ai-internal-text-secondary));
|
|
484
|
+
border-radius: 999px;
|
|
485
|
+
bottom: 7px;
|
|
486
|
+
content: "";
|
|
487
|
+
left: 5px;
|
|
488
|
+
position: absolute;
|
|
489
|
+
top: 7px;
|
|
490
|
+
width: 2px;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.make-ai-assistant__markdown-heading--3,
|
|
494
|
+
.make-ai-assistant__markdown-heading--4,
|
|
495
|
+
.make-ai-assistant__markdown-heading--5,
|
|
496
|
+
.make-ai-assistant__markdown-heading--6 {
|
|
497
|
+
color: color-mix(in srgb, var(--make-ai-internal-text) 90%, var(--make-ai-internal-accent));
|
|
498
|
+
font-size: 1em;
|
|
499
|
+
font-weight: 680;
|
|
500
|
+
}
|
|
501
|
+
|
|
418
502
|
.make-ai-assistant__assistant-text p {
|
|
419
503
|
min-width: 0;
|
|
420
504
|
}
|
|
@@ -647,9 +731,11 @@
|
|
|
647
731
|
cursor: pointer;
|
|
648
732
|
font-size: var(--make-ai-internal-font-size-ui);
|
|
649
733
|
font-weight: 600;
|
|
734
|
+
position: relative;
|
|
650
735
|
}
|
|
651
736
|
|
|
652
|
-
.make-ai-assistant__reply-copy
|
|
737
|
+
.make-ai-assistant__reply-copy,
|
|
738
|
+
.make-ai-assistant__reply-regenerate {
|
|
653
739
|
align-items: center;
|
|
654
740
|
border: 1px solid transparent;
|
|
655
741
|
display: inline-flex;
|
|
@@ -659,7 +745,8 @@
|
|
|
659
745
|
width: 28px;
|
|
660
746
|
}
|
|
661
747
|
|
|
662
|
-
.make-ai-assistant__reply-copy svg
|
|
748
|
+
.make-ai-assistant__reply-copy svg,
|
|
749
|
+
.make-ai-assistant__reply-regenerate svg {
|
|
663
750
|
fill: none;
|
|
664
751
|
height: 15px;
|
|
665
752
|
stroke: currentColor;
|
|
@@ -669,17 +756,40 @@
|
|
|
669
756
|
width: 15px;
|
|
670
757
|
}
|
|
671
758
|
|
|
672
|
-
.make-ai-assistant__reply-
|
|
673
|
-
|
|
759
|
+
.make-ai-assistant__reply-action[data-tooltip]::after,
|
|
760
|
+
.make-ai-assistant__send[data-tooltip]::after {
|
|
761
|
+
background: color-mix(in srgb, var(--make-ai-internal-text) 94%, #000);
|
|
762
|
+
border-radius: 8px;
|
|
763
|
+
bottom: calc(100% + 7px);
|
|
764
|
+
box-shadow: 0 8px 18px rgb(30 31 43 / 18%);
|
|
765
|
+
color: #fcfcff;
|
|
766
|
+
content: attr(data-tooltip);
|
|
767
|
+
font-size: 11px;
|
|
768
|
+
font-weight: 600;
|
|
769
|
+
left: 50%;
|
|
770
|
+
line-height: 1;
|
|
771
|
+
opacity: 0;
|
|
772
|
+
padding: 6px 8px;
|
|
773
|
+
pointer-events: none;
|
|
774
|
+
position: absolute;
|
|
775
|
+
transform: translate(-50%, 2px);
|
|
776
|
+
transition: opacity 120ms ease, transform 120ms ease;
|
|
777
|
+
white-space: nowrap;
|
|
778
|
+
z-index: 3;
|
|
674
779
|
}
|
|
675
780
|
|
|
676
|
-
.make-ai-assistant__reply-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
781
|
+
.make-ai-assistant__reply-action[data-tooltip]:hover::after,
|
|
782
|
+
.make-ai-assistant__reply-action[data-tooltip]:focus-visible::after,
|
|
783
|
+
.make-ai-assistant__send[data-tooltip]:hover::after,
|
|
784
|
+
.make-ai-assistant__send[data-tooltip]:focus-visible::after {
|
|
785
|
+
opacity: 1;
|
|
786
|
+
transform: translate(-50%, 0);
|
|
680
787
|
}
|
|
681
788
|
|
|
789
|
+
.make-ai-assistant__reply-copy:hover,
|
|
682
790
|
.make-ai-assistant__reply-regenerate:hover {
|
|
791
|
+
background: var(--make-ai-internal-surface);
|
|
792
|
+
border-color: color-mix(in srgb, var(--make-ai-internal-accent) 18%, var(--make-ai-internal-border));
|
|
683
793
|
color: var(--make-ai-internal-accent);
|
|
684
794
|
}
|
|
685
795
|
|
|
@@ -1034,6 +1144,16 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
|
|
|
1034
1144
|
to { opacity: 1; transform: translateX(0); }
|
|
1035
1145
|
}
|
|
1036
1146
|
|
|
1147
|
+
@keyframes make-ai-launcher-orbit {
|
|
1148
|
+
from { transform: rotate(0deg); }
|
|
1149
|
+
to { transform: rotate(360deg); }
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
@keyframes make-ai-launcher-breathe {
|
|
1153
|
+
0%, 100% { opacity: .58; }
|
|
1154
|
+
50% { opacity: .92; }
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1037
1157
|
@container (max-width: 360px) {
|
|
1038
1158
|
.make-ai-assistant__header {
|
|
1039
1159
|
gap: 8px;
|
|
@@ -1089,7 +1209,7 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
|
|
|
1089
1209
|
|
|
1090
1210
|
@media (max-width: 560px) {
|
|
1091
1211
|
.make-ai-assistant__drawer { width: 100vw; }
|
|
1092
|
-
.make-ai-assistant__launcher {
|
|
1212
|
+
.make-ai-assistant__launcher { right: var(--make-ai-launcher-mobile-right, 16px); }
|
|
1093
1213
|
.make-ai-artifact__record {
|
|
1094
1214
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
1095
1215
|
}
|
|
@@ -1116,7 +1236,10 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
|
|
|
1116
1236
|
animation: none;
|
|
1117
1237
|
}
|
|
1118
1238
|
.make-ai-assistant__launcher,
|
|
1239
|
+
.make-ai-assistant__launcher > svg,
|
|
1119
1240
|
.make-ai-assistant__back-to-latest,
|
|
1241
|
+
.make-ai-assistant__reply-action[data-tooltip]::after,
|
|
1242
|
+
.make-ai-assistant__send[data-tooltip]::after,
|
|
1120
1243
|
.make-ai-assistant__process summary::after {
|
|
1121
1244
|
transition: none;
|
|
1122
1245
|
}
|
package/package.ai.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"packageName": "@qfei-design/make-ai-assistant",
|
|
3
|
-
"minimumRuntimeVersion": "0.1.
|
|
3
|
+
"minimumRuntimeVersion": "0.1.9",
|
|
4
4
|
"readOrder": [
|
|
5
5
|
"package.ai.json",
|
|
6
6
|
"README.md",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"ssrSupported": true
|
|
16
16
|
},
|
|
17
17
|
"install": {
|
|
18
|
-
"pnpm": "pnpm add @qfei-design/make-ai-assistant@^0.1.
|
|
19
|
-
"npm": "npm install @qfei-design/make-ai-assistant@^0.1.
|
|
20
|
-
"yarn": "yarn add @qfei-design/make-ai-assistant@^0.1.
|
|
18
|
+
"pnpm": "pnpm add @qfei-design/make-ai-assistant@^0.1.9",
|
|
19
|
+
"npm": "npm install @qfei-design/make-ai-assistant@^0.1.9",
|
|
20
|
+
"yarn": "yarn add @qfei-design/make-ai-assistant@^0.1.9"
|
|
21
21
|
},
|
|
22
22
|
"exports": [
|
|
23
23
|
"@qfei-design/make-ai-assistant",
|
package/package.json
CHANGED