@nonoun/native-chat 0.5.23 → 0.5.24
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/README.md +40 -0
- package/dist/native-chat.css +32 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -370,6 +370,46 @@ import type {
|
|
|
370
370
|
import { renderMarkdown, renderInline, sanitizeHtml } from '@nonoun/native-chat';
|
|
371
371
|
```
|
|
372
372
|
|
|
373
|
+
## Starter Surface
|
|
374
|
+
|
|
375
|
+
Compose seed prompts and structured input into a starter card using the `.n-chat-starter` class. It harmonizes spacing between components — no custom CSS needed.
|
|
376
|
+
|
|
377
|
+
```html
|
|
378
|
+
<n-card class="n-chat-starter">
|
|
379
|
+
<n-body>
|
|
380
|
+
<n-chat-message-seed></n-chat-message-seed>
|
|
381
|
+
<n-chat-input-structured
|
|
382
|
+
question="What would you like help with?"
|
|
383
|
+
type="single">
|
|
384
|
+
</n-chat-input-structured>
|
|
385
|
+
</n-body>
|
|
386
|
+
</n-card>
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
Add `compact` for tighter spacing (sidebars, small cards):
|
|
390
|
+
|
|
391
|
+
```html
|
|
392
|
+
<n-card class="n-chat-starter" compact>
|
|
393
|
+
<n-body>
|
|
394
|
+
<n-chat-message-seed></n-chat-message-seed>
|
|
395
|
+
<n-chat-input-structured question="Quick start" type="single">
|
|
396
|
+
</n-chat-input-structured>
|
|
397
|
+
</n-body>
|
|
398
|
+
</n-card>
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
### Starter Tokens
|
|
402
|
+
|
|
403
|
+
| Token | Default | Starter | Compact |
|
|
404
|
+
|-------|---------|---------|---------|
|
|
405
|
+
| `--n-chat-seed-padding-inline` | `var(--n-chat-bubble-padding-inline)` | `0` | `0` |
|
|
406
|
+
| `--n-chat-seed-padding-block` | `var(--n-space)` | `0` | `0` |
|
|
407
|
+
| `--n-chat-seed-gap` | `var(--n-space)` | *(inherited)* | `space × 0.5` |
|
|
408
|
+
| `--n-chat-structured-padding` | `space × 3` | `space × 2` | `space × 1` |
|
|
409
|
+
| `--n-chat-structured-gap` | `space × 2` | `space × 1` | `space × 0.5` |
|
|
410
|
+
|
|
411
|
+
---
|
|
412
|
+
|
|
373
413
|
## Astro Integration
|
|
374
414
|
|
|
375
415
|
See the [Astro + native-chat-panel Playbook](../../docs/ASTRO-CHAT.md) for the canonical Astro recipe: CSS load order, registration, event wiring, View Transitions, and troubleshooting.
|
package/dist/native-chat.css
CHANGED
|
@@ -846,3 +846,35 @@
|
|
|
846
846
|
}
|
|
847
847
|
|
|
848
848
|
}
|
|
849
|
+
|
|
850
|
+
/* ════════════════════════════════════════════════════
|
|
851
|
+
.n-chat-starter — Starter surface preset
|
|
852
|
+
════════════════════════════════════════════════════
|
|
853
|
+
|
|
854
|
+
Harmonizes seed + structured input spacing when composed
|
|
855
|
+
together as a starter surface (e.g. inside n-card, n-body).
|
|
856
|
+
|
|
857
|
+
Add `compact` attribute for tighter spacing (small cards,
|
|
858
|
+
inline starters, sidebars).
|
|
859
|
+
|
|
860
|
+
Usage:
|
|
861
|
+
<n-card class="n-chat-starter">
|
|
862
|
+
<n-body>
|
|
863
|
+
<n-chat-message-seed></n-chat-message-seed>
|
|
864
|
+
<n-chat-input-structured question="..."></n-chat-input-structured>
|
|
865
|
+
</n-body>
|
|
866
|
+
</n-card>
|
|
867
|
+
*/
|
|
868
|
+
|
|
869
|
+
.n-chat-starter {
|
|
870
|
+
--n-chat-seed-padding-inline: 0;
|
|
871
|
+
--n-chat-seed-padding-block: 0;
|
|
872
|
+
--n-chat-structured-padding: calc(var(--n-space) * 2);
|
|
873
|
+
--n-chat-structured-gap: var(--n-space);
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
.n-chat-starter[compact] {
|
|
877
|
+
--n-chat-seed-gap: calc(var(--n-space) * 0.5);
|
|
878
|
+
--n-chat-structured-padding: var(--n-space);
|
|
879
|
+
--n-chat-structured-gap: calc(var(--n-space) * 0.5);
|
|
880
|
+
}
|