@memberjunction/ng-artifacts 4.0.0 → 4.2.0

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 (2) hide show
  1. package/README.md +190 -0
  2. package/package.json +11 -11
package/README.md ADDED
@@ -0,0 +1,190 @@
1
+ # @memberjunction/ng-artifacts
2
+
3
+ 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.
4
+
5
+ ## Overview
6
+
7
+ 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.
8
+
9
+ ```mermaid
10
+ graph TD
11
+ A[ArtifactsModule] --> B[Viewer Components]
12
+ A --> C[Plugin System]
13
+ A --> D[Services]
14
+
15
+ B --> B1[ArtifactViewerPanelComponent]
16
+ B --> B2[ArtifactVersionHistoryComponent]
17
+ B --> B3[ArtifactMessageCardComponent]
18
+ B --> B4[ArtifactTypePluginViewerComponent]
19
+
20
+ C --> C0[BaseArtifactViewerComponent]
21
+ C --> C1[JsonArtifactViewerComponent]
22
+ C --> C2[CodeArtifactViewerComponent]
23
+ C --> C3[MarkdownArtifactViewerComponent]
24
+ C --> C4[HtmlArtifactViewerComponent]
25
+ C --> C5[SvgArtifactViewerComponent]
26
+ C --> C6[ComponentArtifactViewerComponent]
27
+
28
+ D --> D1[ArtifactIconService]
29
+
30
+ style A fill:#2d6a9f,stroke:#1a4971,color:#fff
31
+ style B fill:#7c5295,stroke:#563a6b,color:#fff
32
+ style C fill:#2d8659,stroke:#1a5c3a,color:#fff
33
+ style D fill:#b8762f,stroke:#8a5722,color:#fff
34
+ ```
35
+
36
+ ## Installation
37
+
38
+ ```bash
39
+ npm install @memberjunction/ng-artifacts
40
+ ```
41
+
42
+ ## Usage
43
+
44
+ ### Module Import
45
+
46
+ ```typescript
47
+ import { ArtifactsModule } from '@memberjunction/ng-artifacts';
48
+
49
+ @NgModule({
50
+ imports: [ArtifactsModule]
51
+ })
52
+ export class YourModule { }
53
+ ```
54
+
55
+ ### Artifact Viewer Panel
56
+
57
+ Full-featured panel with toolbar and version navigation:
58
+
59
+ ```html
60
+ <mj-artifact-viewer-panel
61
+ [artifactId]="selectedArtifactId"
62
+ [versionId]="selectedVersionId"
63
+ (versionChanged)="onVersionChanged($event)">
64
+ </mj-artifact-viewer-panel>
65
+ ```
66
+
67
+ ### Artifact Type Plugin Viewer
68
+
69
+ Automatically selects and loads the correct plugin based on artifact type:
70
+
71
+ ```html
72
+ <mj-artifact-type-plugin-viewer
73
+ [artifactVersion]="currentVersion"
74
+ [artifactTypeName]="'Code'">
75
+ </mj-artifact-type-plugin-viewer>
76
+ ```
77
+
78
+ ### Artifact Version History
79
+
80
+ Timeline of artifact versions:
81
+
82
+ ```html
83
+ <mj-artifact-version-history
84
+ [artifactId]="selectedArtifactId"
85
+ (versionSelected)="onVersionSelected($event)">
86
+ </mj-artifact-version-history>
87
+ ```
88
+
89
+ ### Artifact Message Card
90
+
91
+ Compact card for displaying an artifact reference within a conversation message:
92
+
93
+ ```html
94
+ <mj-artifact-message-card
95
+ [artifact]="artifactRef"
96
+ (clicked)="onArtifactCardClicked($event)">
97
+ </mj-artifact-message-card>
98
+ ```
99
+
100
+ ## Plugin Architecture
101
+
102
+ ### IArtifactViewerPlugin Interface
103
+
104
+ All artifact viewer plugins implement this interface and are registered with `@RegisterClass`:
105
+
106
+ ```typescript
107
+ interface IArtifactViewerPlugin {
108
+ readonly componentType: Type<IArtifactViewerComponent>;
109
+ canHandle(artifactTypeName: string, contentType?: string): boolean;
110
+ getMetadata?(artifactVersion: ArtifactVersionEntity): ArtifactMetadata;
111
+ }
112
+ ```
113
+
114
+ ### Creating a Custom Plugin
115
+
116
+ ```typescript
117
+ import { RegisterClass } from '@memberjunction/global';
118
+ import { BaseArtifactViewerComponent } from '@memberjunction/ng-artifacts';
119
+
120
+ @RegisterClass(BaseArtifactViewerComponent, 'MyCustomType')
121
+ @Component({
122
+ selector: 'my-custom-viewer',
123
+ template: `<div>{{ artifactVersion.Content }}</div>`
124
+ })
125
+ export class MyCustomViewerComponent extends BaseArtifactViewerComponent {
126
+ // Custom rendering logic
127
+ }
128
+ ```
129
+
130
+ ### Built-in Plugins
131
+
132
+ | Plugin | Artifact Type | Description |
133
+ |--------|---------------|-------------|
134
+ | `JsonArtifactViewerComponent` | JSON | Formatted JSON with syntax highlighting |
135
+ | `CodeArtifactViewerComponent` | Code | Code editor with language detection |
136
+ | `MarkdownArtifactViewerComponent` | Markdown | Rendered markdown content |
137
+ | `HtmlArtifactViewerComponent` | HTML | Sandboxed HTML rendering |
138
+ | `SvgArtifactViewerComponent` | SVG | SVG image rendering |
139
+ | `ComponentArtifactViewerComponent` | Component | Dynamic React/Angular component rendering |
140
+
141
+ ## Services
142
+
143
+ ### ArtifactIconService
144
+
145
+ Provides appropriate Font Awesome icons for artifact types:
146
+
147
+ ```typescript
148
+ import { ArtifactIconService } from '@memberjunction/ng-artifacts';
149
+
150
+ constructor(private iconService: ArtifactIconService) {}
151
+
152
+ getIcon() {
153
+ const icon = this.iconService.getIconForType('Code');
154
+ // Returns 'fa-solid fa-code'
155
+ }
156
+ ```
157
+
158
+ ## Dependencies
159
+
160
+ | Package | Description |
161
+ |---------|-------------|
162
+ | `@memberjunction/core` | Core framework |
163
+ | `@memberjunction/core-entities` | Entity type definitions |
164
+ | `@memberjunction/global` | Global utilities and class registration |
165
+ | `@memberjunction/interactive-component-types` | Interactive component interfaces |
166
+ | `@memberjunction/ng-base-types` | Base Angular component types |
167
+ | `@memberjunction/ng-code-editor` | Code editor for code artifacts |
168
+ | `@memberjunction/ng-notifications` | Notification system |
169
+ | `@memberjunction/ng-react` | React component bridge |
170
+ | `@memberjunction/ng-shared-generic` | Shared generic components |
171
+ | `@memberjunction/ng-markdown` | Markdown rendering |
172
+ | `marked` | Markdown parser |
173
+ | `@angular/cdk` | Angular CDK |
174
+
175
+ ### Peer Dependencies
176
+
177
+ - `@angular/common` ^21.x
178
+ - `@angular/core` ^21.x
179
+ - `@angular/platform-browser` ^21.x
180
+
181
+ ## Build
182
+
183
+ ```bash
184
+ cd packages/Angular/Generic/artifacts
185
+ npm run build
186
+ ```
187
+
188
+ ## License
189
+
190
+ ISC
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-artifacts",
3
- "version": "4.0.0",
3
+ "version": "4.2.0",
4
4
  "description": "MemberJunction: Artifact viewer plugin system for rendering different artifact types (JSON, Code, Markdown, HTML, SVG, Components)",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -27,16 +27,16 @@
27
27
  "dependencies": {
28
28
  "@angular/cdk": "21.1.3",
29
29
  "@angular/forms": "21.1.3",
30
- "@memberjunction/core": "4.0.0",
31
- "@memberjunction/core-entities": "4.0.0",
32
- "@memberjunction/global": "4.0.0",
33
- "@memberjunction/interactive-component-types": "4.0.0",
34
- "@memberjunction/ng-base-types": "4.0.0",
35
- "@memberjunction/ng-code-editor": "4.0.0",
36
- "@memberjunction/ng-notifications": "4.0.0",
37
- "@memberjunction/ng-react": "4.0.0",
38
- "@memberjunction/ng-shared-generic": "4.0.0",
39
- "@memberjunction/ng-markdown": "4.0.0",
30
+ "@memberjunction/core": "4.2.0",
31
+ "@memberjunction/core-entities": "4.2.0",
32
+ "@memberjunction/global": "4.2.0",
33
+ "@memberjunction/interactive-component-types": "4.2.0",
34
+ "@memberjunction/ng-base-types": "4.2.0",
35
+ "@memberjunction/ng-code-editor": "4.2.0",
36
+ "@memberjunction/ng-notifications": "4.2.0",
37
+ "@memberjunction/ng-react": "4.2.0",
38
+ "@memberjunction/ng-shared-generic": "4.2.0",
39
+ "@memberjunction/ng-markdown": "4.2.0",
40
40
  "marked": "^17.0.1",
41
41
  "rxjs": "^7.8.2",
42
42
  "tslib": "^2.8.1"