ArtifactPanel
Something the assistant made, with its preview, its code and earlier versions.
SourcePackage @kerf-js/veneer
Preview
tsx
import { ArtifactPanel, Badge, Row, Stack, Text} from '@kerf-js/veneer'import type { ArtifactVersion } from '@kerf-js/veneer'export function Config() { return ( <div style="block-size:280px"> <ArtifactPanel title="kerf.yaml" versions={CONFIG_VERSIONS} > <Stack gap="related"> <Row gap="related"> <Text role="label">mobile-bff</Text> <Badge tone="info">ap-south</Badge> </Row> <Text subtle> Two attempts, three seconds each. A slow upstream now fails in six seconds, not fifteen. </Text> </Stack> </ArtifactPanel> </div> )}const CONFIG_VERSIONS: ArtifactVersion[] = [ { id: 'v3', label: 'v3 · two retries', meta: 'Assistant · now', code: 'project: mobile-bff\nregion: ' + 'ap-south\nretry:\n attempts: 2\n' + ' timeout: 3s', }, { id: 'v2', label: 'v2 · five retries', meta: 'Sam Okafor · 15:20', code: 'project: mobile-bff\nregion: ' + 'ap-south\nretry:\n attempts: 5\n' + ' timeout: 3s', }, { id: 'v1', label: 'v1 · first draft', meta: 'Sam Okafor · Oct 12', code: 'project: mobile-bff\nregion: ap-south', },]Installation
npm install @kerf-js/veneerUsage
tsx
import { ArtifactPanel } from '@kerf-js/veneer'Accessibility
- LeftandRight
- Move between the tabs
- UpandDown
- Move through the versions
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | unknown | — | The name. |
versions | ArtifactVersion[] | — | Newest first. Each may have its own code. |
version | string | State<string | undefined> | — | The version on show, if you want to hold it yourself. |
code | string | — | The code when versions have none. |
children | unknown | — | The preview. |
| Event | Type | Default | Description |
|---|---|---|---|
onVersion | ((id: string) => void) | — | A version was picked. |
onOpen | (() => void) | — | Adds an Open in editor button. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="artifact"] [data-part="panel"]
panel
RelatedConversationCode block