@memberjunction/ng-artifacts

Angular artifact viewer plugin system for rendering different artifact types (JSON, Code, Markdown, HTML, SVG, React Components) with version history, message cards, and an extensible plugin architecture.

Overview

The @memberjunction/ng-artifacts package provides a pluggable viewer system for MemberJunction conversation artifacts. Each artifact type (JSON, Code, Markdown, HTML, SVG, Component) is rendered by a dedicated viewer plugin, selected automatically based on the artifact’s type metadata. The package also includes components for artifact version history browsing, viewer panels, and inline message cards.

graph TD
    A[ArtifactsModule] --> B[Viewer Components]
    A --> C[Plugin System]
    A --> D[Services]

    B --> B1[ArtifactViewerPanelComponent]
    B --> B2[ArtifactVersionHistoryComponent]
    B --> B3[ArtifactMessageCardComponent]
    B --> B4[ArtifactTypePluginViewerComponent]

    C --> C0[BaseArtifactViewerComponent]
    C --> C1[JsonArtifactViewerComponent]
    C --> C2[CodeArtifactViewerComponent]
    C --> C3[MarkdownArtifactViewerComponent]
    C --> C4[HtmlArtifactViewerComponent]
    C --> C5[SvgArtifactViewerComponent]
    C --> C6[ComponentArtifactViewerComponent]

    D --> D1[ArtifactIconService]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style D fill:#b8762f,stroke:#8a5722,color:#fff

Installation

npm install @memberjunction/ng-artifacts

Usage

Module Import

import { ArtifactsModule } from '@memberjunction/ng-artifacts';

@NgModule({
  imports: [ArtifactsModule]
})
export class YourModule { }

Artifact Viewer Panel

Full-featured panel with toolbar and version navigation:

<mj-artifact-viewer-panel
  [artifactId]="selectedArtifactId"
  [versionId]="selectedVersionId"
  (versionChanged)="onVersionChanged($event)">
</mj-artifact-viewer-panel>

Artifact Type Plugin Viewer

Automatically selects and loads the correct plugin based on artifact type:

<mj-artifact-type-plugin-viewer
  [artifactVersion]="currentVersion"
  [artifactTypeName]="'Code'">
</mj-artifact-type-plugin-viewer>

Artifact Version History

Timeline of artifact versions:

<mj-artifact-version-history
  [artifactId]="selectedArtifactId"
  (versionSelected)="onVersionSelected($event)">
</mj-artifact-version-history>

Artifact Message Card

Compact card for displaying an artifact reference within a conversation message:

<mj-artifact-message-card
  [artifact]="artifactRef"
  (clicked)="onArtifactCardClicked($event)">
</mj-artifact-message-card>

Plugin Architecture

IArtifactViewerPlugin Interface

All artifact viewer plugins implement this interface and are registered with @RegisterClass:

interface IArtifactViewerPlugin {
  readonly componentType: Type<IArtifactViewerComponent>;
  canHandle(artifactTypeName: string, contentType?: string): boolean;
  getMetadata?(artifactVersion: ArtifactVersionEntity): ArtifactMetadata;
}

Creating a Custom Plugin

import { RegisterClass } from '@memberjunction/global';
import { BaseArtifactViewerComponent } from '@memberjunction/ng-artifacts';

@RegisterClass(BaseArtifactViewerComponent, 'MyCustomType')
@Component({
  selector: 'my-custom-viewer',
  template: `<div>{{ artifactVersion.Content }}</div>`
})
export class MyCustomViewerComponent extends BaseArtifactViewerComponent {
  // Custom rendering logic
}

Built-in Plugins

Plugin	Artifact Type	Description
`JsonArtifactViewerComponent`	JSON	Formatted JSON with syntax highlighting
`CodeArtifactViewerComponent`	Code	Code editor with language detection
`MarkdownArtifactViewerComponent`	Markdown	Rendered markdown content
`HtmlArtifactViewerComponent`	HTML	Sandboxed HTML rendering
`SvgArtifactViewerComponent`	SVG	SVG image rendering
`AudioArtifactViewerComponent`	Audio	Audio playback via `mj-media-player` (transport, waveform scrubber, playback speed)
`VideoArtifactViewerComponent`	Video	Video playback via `mj-media-player` (transport, fullscreen, playback speed)
`ComponentArtifactViewerComponent`	Component	Dynamic React/Angular component rendering

Audio and video artifacts (both the full viewer and the inline conversation preview) embed the generic mj-media-player from @memberjunction/ng-media-player.

Services

ArtifactIconService

Provides appropriate Font Awesome icons for artifact types:

import { ArtifactIconService } from '@memberjunction/ng-artifacts';

constructor(private iconService: ArtifactIconService) {}

getIcon() {
  const icon = this.iconService.getIconForType('Code');
  // Returns 'fa-solid fa-code'
}

Dependencies

Package	Description
`@memberjunction/core`	Core framework
`@memberjunction/core-entities`	Entity type definitions
`@memberjunction/global`	Global utilities and class registration
`@memberjunction/interactive-component-types`	Interactive component interfaces
`@memberjunction/ng-base-types`	Base Angular component types
`@memberjunction/ng-code-editor`	Code editor for code artifacts
`@memberjunction/ng-media-player`	Audio/video playback (`mj-media-player`) for audio & video artifacts
`@memberjunction/ng-notifications`	Notification system
`@memberjunction/ng-react`	React component bridge
`@memberjunction/ng-shared-generic`	Shared generic components
`@memberjunction/ng-markdown`	Markdown rendering
`marked`	Markdown parser
`@angular/cdk`	Angular CDK

Peer Dependencies

@angular/common ^21.x
@angular/core ^21.x
@angular/platform-browser ^21.x

Form-aware artifact viewer (interactive forms)

When an artifact’s spec declares componentRole: 'form', the ComponentArtifactViewerComponent switches to its form-aware branch:

Resolves the entity from spec.entityName (or spec.dataRequirements.entities[0].name)
Loads TOP 1 record (ordered by NameField then __mj_CreatedAt) and mounts via <mj-interactive-form> bound to that real record
Falls back to a fresh NewRecord() when the entity has no rows
Exposes a search-as-you-type record picker so users can swap the bound record
Bubbles a top-level applyFormRequested @Output carrying { spec, entityName } when the user clicks “Apply to my form”

The InteractiveFormApplyService (exported from this package) consumes that event end-to-end: confirms with the user via MJDialogService, calls Get Active Form For Entity to detect existing state, then routes to Create Interactive Form (net-new) or Modify Interactive Form (refinement → new Pending version).

Consumers wire one line in their template:

<mj-artifact-viewer-panel
  ...
  (applyFormRequested)="onApplyFormRequested($event)">
</mj-artifact-viewer-panel>

…and inject InteractiveFormApplyService in the handler.

Wired in ConversationChatAreaComponent (live chat) and ArtifactResource (standalone artifact viewing in Explorer).

Build

cd packages/Angular/Generic/artifacts
npm run build

License

ISC