ArtifactPanel
Something the assistant made, with its preview, its code and earlier versions.
SourcePackage @weft-js/warp
Preview
tsx
import { ArtifactPanel, Badge, Row, Stack, Text } from '@weft-js/warp'import type { ArtifactVersion } from '@weft-js/warp'export function Config() { return ( <div style="block-size:280px"> <ArtifactPanel title="weft.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 @weft-js/warpUsage
tsx
import { ArtifactPanel } from '@weft-js/warp'<div style="block-size:280px"> <ArtifactPanel title="weft.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>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="head"]
headrootlisttriggerindicatorpanelpreview
RelatedConversationCode block