@qfei-design/make-ai-assistant 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/PUBLIC_API.md +4 -2
  2. package/README.md +4 -1
  3. package/dist/react/make-ai-assistant.d.ts +3 -1
  4. package/dist/react.cjs +1 -1
  5. package/dist/react.mjs +556 -463
  6. package/dist/styles.css +103 -87
  7. package/package.ai.json +4 -4
  8. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -1,19 +1,19 @@
1
1
  :where(.make-ai-assistant, .make-ai-artifact) {
2
2
  --make-ai-internal-accent: var(--make-ai-accent, var(--make-color-primary, #5147f3));
3
3
  --make-ai-internal-accent-strong: var(--make-ai-accent-strong, var(--make-color-primary-hover, #4037da));
4
- --make-ai-internal-accent-soft: var(--make-ai-accent-soft, color-mix(in srgb, var(--make-ai-internal-accent) 10%, white));
5
- --make-ai-internal-bg: var(--make-ai-bg, var(--make-color-bg, #ffffff));
6
- --make-ai-internal-surface: var(--make-ai-surface, var(--make-color-bg-subtle, #f7f8fb));
7
- --make-ai-internal-surface-strong: var(--make-ai-surface-strong, var(--make-color-bg-muted, #f0f2f7));
8
- --make-ai-internal-text: var(--make-ai-text, var(--make-color-text, #1f2430));
9
- --make-ai-internal-text-secondary: var(--make-ai-text-secondary, var(--make-color-text-secondary, #687080));
10
- --make-ai-internal-border: var(--make-ai-border, var(--make-color-border, #e5e8ef));
4
+ --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)));
5
+ --make-ai-internal-bg: var(--make-ai-bg, var(--make-color-bg, #fcfcff));
6
+ --make-ai-internal-surface: var(--make-ai-surface, var(--make-color-bg-subtle, #f8f8fc));
7
+ --make-ai-internal-surface-strong: var(--make-ai-surface-strong, var(--make-color-bg-muted, #f0f0f6));
8
+ --make-ai-internal-text: var(--make-ai-text, var(--make-color-text, #252631));
9
+ --make-ai-internal-text-secondary: var(--make-ai-text-secondary, var(--make-color-text-secondary, #666979));
10
+ --make-ai-internal-border: var(--make-ai-border, var(--make-color-border, #e4e5ed));
11
11
  --make-ai-internal-success: var(--make-ai-success, var(--make-color-success, #1a9a61));
12
12
  --make-ai-internal-warning: var(--make-ai-warning, var(--make-color-warning, #c77b00));
13
13
  --make-ai-internal-danger: var(--make-ai-danger, var(--make-color-danger, #d04444));
14
14
  --make-ai-internal-radius: var(--make-ai-radius, var(--make-radius-large, 14px));
15
- --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 52px rgb(23 26 38 / 16%));
16
- --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 408px);
15
+ --make-ai-internal-shadow: var(--make-ai-shadow, 0 18px 48px rgb(30 31 43 / 12%));
16
+ --make-ai-internal-drawer-width: var(--make-ai-drawer-width, 432px);
17
17
  --make-ai-internal-z-index: var(--make-ai-z-index, 1050);
18
18
  }
19
19
 
@@ -33,7 +33,7 @@
33
33
 
34
34
  .make-ai-assistant {
35
35
  color: var(--make-ai-internal-text);
36
- font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
36
+ font-family: inherit;
37
37
  }
38
38
 
39
39
  .make-ai-assistant button,
@@ -47,27 +47,27 @@
47
47
 
48
48
  .make-ai-assistant__launcher {
49
49
  align-items: center;
50
- background: linear-gradient(145deg, color-mix(in srgb, var(--make-ai-internal-accent) 82%, #9f91ff), var(--make-ai-internal-accent));
51
- border: 0;
50
+ background: var(--make-ai-internal-accent);
51
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 70%, var(--make-ai-internal-border));
52
52
  border-radius: 50%;
53
53
  bottom: 28px;
54
- box-shadow: 0 10px 30px color-mix(in srgb, var(--make-ai-internal-accent) 32%, transparent);
55
- color: white;
54
+ box-shadow: 0 10px 24px color-mix(in srgb, var(--make-ai-internal-accent) 22%, transparent);
55
+ color: #fcfcff;
56
56
  cursor: pointer;
57
57
  display: flex;
58
- height: 54px;
58
+ height: 50px;
59
59
  justify-content: center;
60
60
  padding: 0;
61
61
  position: fixed;
62
62
  right: 28px;
63
63
  transition: box-shadow 180ms ease, transform 180ms ease;
64
- width: 54px;
64
+ width: 50px;
65
65
  z-index: calc(var(--make-ai-internal-z-index) + 2);
66
66
  }
67
67
 
68
68
  .make-ai-assistant__launcher:hover {
69
- box-shadow: 0 14px 36px color-mix(in srgb, var(--make-ai-internal-accent) 42%, transparent);
70
- transform: translateY(-2px) scale(1.03);
69
+ box-shadow: 0 12px 28px color-mix(in srgb, var(--make-ai-internal-accent) 28%, transparent);
70
+ transform: translateY(-2px);
71
71
  }
72
72
 
73
73
  .make-ai-assistant__launcher:focus-visible,
@@ -89,11 +89,10 @@
89
89
  }
90
90
 
91
91
  .make-ai-assistant__launcher-orbit {
92
- border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 46%, transparent);
92
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 30%, transparent);
93
93
  border-radius: 50%;
94
- inset: -7px;
94
+ inset: -5px;
95
95
  position: absolute;
96
- animation: make-ai-pulse 2.2s ease-out infinite;
97
96
  }
98
97
 
99
98
  .make-ai-assistant__drawer {
@@ -107,11 +106,12 @@
107
106
  top: 0;
108
107
  width: min(var(--make-ai-internal-drawer-width), 100vw);
109
108
  z-index: var(--make-ai-internal-z-index);
110
- animation: make-ai-drawer-in 220ms cubic-bezier(.2, .75, .35, 1);
109
+ animation: make-ai-drawer-in 180ms cubic-bezier(.2, .75, .35, 1);
111
110
  }
112
111
 
113
112
  .make-ai-assistant__panel {
114
113
  background: var(--make-ai-internal-bg);
114
+ container-type: inline-size;
115
115
  display: grid;
116
116
  grid-template-rows: auto auto minmax(0, 1fr) auto;
117
117
  height: 100%;
@@ -124,8 +124,8 @@
124
124
  display: grid;
125
125
  gap: 10px;
126
126
  grid-template-columns: auto 1fr auto;
127
- min-height: 72px;
128
- padding: 14px 16px;
127
+ min-height: 70px;
128
+ padding: 14px 18px;
129
129
  }
130
130
 
131
131
  .make-ai-assistant__header h2,
@@ -136,33 +136,24 @@
136
136
  }
137
137
 
138
138
  .make-ai-assistant__header h2 {
139
- font-size: 16px;
140
- font-weight: 650;
139
+ font-size: 15px;
140
+ font-weight: 700;
141
141
  letter-spacing: -.01em;
142
142
  line-height: 22px;
143
143
  }
144
144
 
145
145
  .make-ai-assistant__header p {
146
- align-items: center;
147
146
  color: var(--make-ai-internal-text-secondary);
148
- display: flex;
149
147
  font-size: 12px;
150
- gap: 6px;
151
- margin-top: 2px;
152
- }
153
-
154
- .make-ai-assistant__online-dot {
155
- background: var(--make-ai-internal-success);
156
- border-radius: 50%;
157
- height: 6px;
158
- width: 6px;
148
+ line-height: 18px;
149
+ margin-top: 1px;
159
150
  }
160
151
 
161
152
  .make-ai-assistant__avatar {
162
153
  align-items: center;
163
154
  background: var(--make-ai-internal-accent-soft);
164
155
  border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 12%, transparent);
165
- border-radius: 11px;
156
+ border-radius: 10px;
166
157
  color: var(--make-ai-internal-accent);
167
158
  display: inline-flex;
168
159
  flex: 0 0 auto;
@@ -209,21 +200,23 @@
209
200
 
210
201
  .make-ai-assistant__privacy-note {
211
202
  align-items: center;
212
- background: var(--make-ai-internal-accent-soft);
213
- color: color-mix(in srgb, var(--make-ai-internal-accent) 76%, var(--make-ai-internal-text));
203
+ background: var(--make-ai-internal-surface);
204
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 84%, transparent);
205
+ color: var(--make-ai-internal-text-secondary);
214
206
  display: flex;
215
207
  font-size: 12px;
216
208
  gap: 8px;
217
- margin: 12px 14px 0;
209
+ line-height: 1.5;
210
+ margin: 12px 18px 0;
218
211
  padding: 8px 10px;
219
- border-radius: 8px;
212
+ border-radius: 10px;
220
213
  }
221
214
 
222
215
  .make-ai-assistant__body {
223
216
  min-height: 0;
224
217
  overflow: auto;
225
218
  overscroll-behavior: contain;
226
- padding: 18px 14px 28px;
219
+ padding: 22px 18px 30px;
227
220
  }
228
221
 
229
222
  .make-ai-assistant__empty {
@@ -260,8 +253,8 @@
260
253
  .make-ai-assistant__message {
261
254
  align-items: flex-start;
262
255
  display: flex;
263
- gap: 9px;
264
- margin-bottom: 22px;
256
+ gap: 10px;
257
+ margin-bottom: 24px;
265
258
  }
266
259
 
267
260
  .make-ai-assistant__message--user {
@@ -271,38 +264,54 @@
271
264
  .make-ai-assistant__message-stack {
272
265
  display: flex;
273
266
  flex-direction: column;
274
- gap: 10px;
275
- max-width: calc(100% - 45px);
267
+ gap: 8px;
276
268
  min-width: 0;
277
269
  }
278
270
 
271
+ .make-ai-assistant__message--assistant .make-ai-assistant__message-stack {
272
+ flex: 1;
273
+ max-width: calc(100% - 38px);
274
+ }
275
+
279
276
  .make-ai-assistant__message--user .make-ai-assistant__message-stack {
280
277
  align-items: flex-end;
278
+ max-width: min(82%, 330px);
279
+ }
280
+
281
+ .make-ai-assistant__message-sender {
282
+ color: var(--make-ai-internal-text-secondary);
283
+ font-size: 12px;
284
+ font-weight: 600;
285
+ line-height: 16px;
286
+ }
287
+
288
+ .make-ai-assistant__message--user .make-ai-assistant__message-sender {
289
+ color: color-mix(in srgb, var(--make-ai-internal-accent) 72%, var(--make-ai-internal-text));
281
290
  }
282
291
 
283
292
  .make-ai-assistant__bubble {
284
- background: var(--make-ai-internal-surface);
285
- border-radius: 4px 14px 14px;
293
+ color: var(--make-ai-internal-text);
286
294
  font-size: 14px;
287
- line-height: 1.65;
288
- padding: 10px 12px;
295
+ line-height: 1.7;
289
296
  white-space: pre-wrap;
290
297
  }
291
298
 
292
299
  .make-ai-assistant__message--user .make-ai-assistant__bubble {
293
- background: var(--make-ai-internal-accent-soft);
294
- border-radius: 14px 4px 14px 14px;
300
+ background: color-mix(in srgb, var(--make-ai-internal-accent) 10%, var(--make-ai-internal-surface));
301
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 12%, var(--make-ai-internal-border));
302
+ border-radius: 16px 5px 16px 16px;
295
303
  color: color-mix(in srgb, var(--make-ai-internal-accent) 68%, var(--make-ai-internal-text));
304
+ padding: 10px 13px;
296
305
  }
297
306
 
298
307
  .make-ai-assistant__typing {
299
308
  align-items: center;
300
309
  background: var(--make-ai-internal-surface);
301
- border-radius: 4px 14px 14px;
310
+ border-radius: 10px;
302
311
  display: flex;
303
312
  gap: 4px;
304
- height: 38px;
305
- padding: 0 13px;
313
+ height: 34px;
314
+ padding: 0 12px;
306
315
  }
307
316
 
308
317
  .make-ai-assistant__typing span {
@@ -317,26 +326,30 @@
317
326
  .make-ai-assistant__typing span:nth-child(2) { animation-delay: 140ms; }
318
327
  .make-ai-assistant__typing span:nth-child(3) { animation-delay: 280ms; }
319
328
 
320
- .make-ai-assistant__error {
321
- background: color-mix(in srgb, var(--make-ai-internal-danger) 8%, white);
322
- border: 1px solid color-mix(in srgb, var(--make-ai-internal-danger) 20%, transparent);
329
+ .make-ai-assistant__message-status {
323
330
  border-radius: 10px;
324
- color: var(--make-ai-internal-danger);
325
331
  display: flex;
326
332
  flex-direction: column;
327
333
  font-size: 13px;
328
- gap: 3px;
329
- margin-left: 45px;
334
+ gap: 4px;
335
+ line-height: 1.55;
330
336
  padding: 10px 12px;
331
337
  }
332
338
 
339
+ .make-ai-assistant__message-status--error {
340
+ background: color-mix(in srgb, var(--make-ai-internal-danger) 7%, var(--make-ai-internal-surface));
341
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-danger) 22%, var(--make-ai-internal-border));
342
+ color: var(--make-ai-internal-danger);
343
+ }
344
+
333
345
  .make-ai-assistant__progress {
334
346
  align-items: center;
335
347
  color: var(--make-ai-internal-text-secondary);
336
348
  display: flex;
337
349
  font-size: 12px;
338
350
  gap: 7px;
339
- margin-left: 45px;
351
+ line-height: 18px;
352
+ min-height: 24px;
340
353
  }
341
354
 
342
355
  .make-ai-assistant__progress > span {
@@ -348,26 +361,28 @@
348
361
  }
349
362
 
350
363
  .make-ai-assistant__retry {
351
- background: var(--make-ai-internal-accent);
352
- border: 0;
353
- border-radius: 8px;
354
- color: white;
364
+ align-self: flex-start;
365
+ background: transparent;
366
+ border: 1px solid currentColor;
367
+ border-radius: 7px;
368
+ color: inherit;
355
369
  cursor: pointer;
356
370
  font-size: 12px;
357
- margin-top: 4px;
358
- padding: 7px 12px;
371
+ font-weight: 600;
372
+ margin-top: 3px;
373
+ padding: 5px 9px;
359
374
  }
360
375
 
361
376
  .make-ai-assistant__composer-region {
362
377
  background: var(--make-ai-internal-bg);
363
378
  border-top: 1px solid var(--make-ai-internal-border);
364
- padding: 10px 14px 8px;
379
+ padding: 12px 18px 10px;
365
380
  }
366
381
 
367
382
  .make-ai-assistant__suggestions {
368
383
  display: flex;
369
- gap: 7px;
370
- margin-bottom: 9px;
384
+ gap: 8px;
385
+ margin-bottom: 10px;
371
386
  overflow: auto;
372
387
  scrollbar-width: none;
373
388
  }
@@ -375,12 +390,12 @@
375
390
  .make-ai-assistant__suggestions button {
376
391
  background: var(--make-ai-internal-surface);
377
392
  border: 1px solid var(--make-ai-internal-border);
378
- border-radius: 999px;
393
+ border-radius: 8px;
379
394
  color: var(--make-ai-internal-text-secondary);
380
395
  cursor: pointer;
381
396
  flex: 0 0 auto;
382
397
  font-size: 12px;
383
- padding: 6px 10px;
398
+ padding: 7px 10px;
384
399
  }
385
400
 
386
401
  .make-ai-assistant__suggestions button:hover {
@@ -392,10 +407,10 @@
392
407
  align-items: flex-end;
393
408
  background: var(--make-ai-internal-bg);
394
409
  border: 1px solid var(--make-ai-internal-border);
395
- border-radius: 12px;
410
+ border-radius: 16px;
396
411
  display: flex;
397
412
  gap: 8px;
398
- padding: 9px 9px 9px 12px;
413
+ padding: 10px 10px 10px 13px;
399
414
  transition: border-color 160ms ease, box-shadow 160ms ease;
400
415
  }
401
416
 
@@ -408,9 +423,9 @@
408
423
  background: transparent;
409
424
  border: 0;
410
425
  color: var(--make-ai-internal-text);
411
- line-height: 1.5;
412
- max-height: 116px;
413
- min-height: 42px;
426
+ line-height: 1.55;
427
+ max-height: 120px;
428
+ min-height: 46px;
414
429
  outline: 0;
415
430
  padding: 1px 0;
416
431
  resize: none;
@@ -418,21 +433,21 @@
418
433
  }
419
434
 
420
435
  .make-ai-assistant__composer textarea::placeholder {
421
- color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 75%, white);
436
+ color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 75%, var(--make-ai-internal-bg));
422
437
  }
423
438
 
424
439
  .make-ai-assistant__send {
425
440
  align-items: center;
426
441
  background: var(--make-ai-internal-accent);
427
442
  border: 0;
428
- border-radius: 9px;
429
- color: white;
443
+ border-radius: 50%;
444
+ color: #fcfcff;
430
445
  cursor: pointer;
431
446
  display: flex;
432
447
  flex: 0 0 auto;
433
- height: 34px;
448
+ height: 36px;
434
449
  justify-content: center;
435
- width: 34px;
450
+ width: 36px;
436
451
  }
437
452
 
438
453
  .make-ai-assistant__send:hover:not(:disabled) { background: var(--make-ai-internal-accent-strong); }
@@ -448,7 +463,8 @@
448
463
  .make-ai-assistant__composer-region > p {
449
464
  color: var(--make-ai-internal-text-secondary);
450
465
  font-size: 10px;
451
- margin: 7px 0 0;
466
+ line-height: 1.45;
467
+ margin: 8px 0 0;
452
468
  text-align: center;
453
469
  }
454
470
 
@@ -536,7 +552,7 @@
536
552
 
537
553
  .make-ai-artifact__action--primary {
538
554
  background: var(--make-ai-internal-accent);
539
- color: white;
555
+ color: #fcfcff;
540
556
  }
541
557
 
542
558
  .make-ai-artifact__action--secondary {
@@ -567,7 +583,7 @@
567
583
  .make-ai-artifact__trend-label { color: var(--make-ai-internal-text-secondary); font-size: 11px; margin-bottom: 8px; }
568
584
  .make-ai-artifact__trend-bars { align-items: flex-end; display: flex; gap: 5px; height: 112px; }
569
585
  .make-ai-artifact__trend-point { align-items: center; display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: flex-end; min-width: 0; }
570
- .make-ai-artifact__trend-bar { background: linear-gradient(to top, var(--make-ai-internal-accent), color-mix(in srgb, var(--make-ai-internal-accent) 42%, white)); border-radius: 4px 4px 1px 1px; min-height: 4px; width: min(18px, 70%); }
586
+ .make-ai-artifact__trend-bar { background: var(--make-ai-internal-accent); border-radius: 4px 4px 1px 1px; min-height: 4px; width: min(18px, 70%); }
571
587
  .make-ai-artifact__trend-point small { color: var(--make-ai-internal-text-secondary); font-size: 9px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
572
588
 
573
589
  .make-ai-artifact__ranking { list-style: none; margin: 12px 0 0; padding: 0; }
package/package.ai.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "packageName": "@qfei-design/make-ai-assistant",
3
- "minimumRuntimeVersion": "0.1.1",
3
+ "minimumRuntimeVersion": "0.1.2",
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.1",
19
- "npm": "npm install @qfei-design/make-ai-assistant@^0.1.1",
20
- "yarn": "yarn add @qfei-design/make-ai-assistant@^0.1.1"
18
+ "pnpm": "pnpm add @qfei-design/make-ai-assistant@^0.1.2",
19
+ "npm": "npm install @qfei-design/make-ai-assistant@^0.1.2",
20
+ "yarn": "yarn add @qfei-design/make-ai-assistant@^0.1.2"
21
21
  },
22
22
  "exports": [
23
23
  "@qfei-design/make-ai-assistant",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qfei-design/make-ai-assistant",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
5
5
  "type": "module",
6
6
  "sideEffects": [