@memberjunction/ng-skip-chat 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.
- package/README.md +93 -439
- package/package.json +18 -18
- package/dist/lib/dynamic-report/dynamic-chart.d.ts +0 -32
- package/dist/lib/dynamic-report/dynamic-chart.d.ts.map +0 -1
- package/dist/lib/dynamic-report/dynamic-chart.js +0 -195
- package/dist/lib/dynamic-report/dynamic-chart.js.map +0 -1
- package/dist/lib/dynamic-report/dynamic-grid.d.ts +0 -38
- package/dist/lib/dynamic-report/dynamic-grid.d.ts.map +0 -1
- package/dist/lib/dynamic-report/dynamic-grid.js +0 -388
- package/dist/lib/dynamic-report/dynamic-grid.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,21 +1,8 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @memberjunction/ng-skip-chat
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> **Note**: For conversational AI functionality, consider using the `@memberjunction/ng-conversations` package, which provides the latest conversational interface patterns.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- **Conversational AI Interface**: Full chat interface for Skip AI assistant
|
|
8
|
-
- **Dynamic Component Rendering**: Displays AI-generated UI components, charts, and data visualizations
|
|
9
|
-
- **Conversation Management**: Create, save, rename, and delete conversations
|
|
10
|
-
- **Message Controls**: Edit, delete, and rate messages
|
|
11
|
-
- **Inline Artifacts**: View and interact with AI-generated artifacts directly within messages
|
|
12
|
-
- **Welcome Experience**: Configurable welcome screen with suggested prompts
|
|
13
|
-
- **Sharing Capabilities**: Share conversations with other users or roles
|
|
14
|
-
- **Data Context Integration**: Link conversations with data contexts for contextual understanding
|
|
15
|
-
- **Entity Linking**: Associate conversations with specific entity records
|
|
16
|
-
- **Responsive Design**: Adapts to different screen sizes and layouts
|
|
17
|
-
- **Markdown Support**: Rich text formatting in messages
|
|
18
|
-
- **Suggested Questions/Answers**: AI-suggested follow-up questions and responses
|
|
5
|
+
An Angular component package for integrating the Skip AI assistant into MemberJunction applications. Provides a full chat interface with conversation management, dynamic report rendering, inline artifact viewing, and data visualization.
|
|
19
6
|
|
|
20
7
|
## Installation
|
|
21
8
|
|
|
@@ -23,32 +10,60 @@ An Angular component package for integrating the Skip AI assistant into MemberJu
|
|
|
23
10
|
npm install @memberjunction/ng-skip-chat
|
|
24
11
|
```
|
|
25
12
|
|
|
13
|
+
## Overview
|
|
14
|
+
|
|
15
|
+
Skip Chat provides a complete conversational AI experience within MemberJunction applications. It manages conversation persistence, renders AI-generated dynamic reports and charts, supports inline artifact viewing with a split-panel layout, and integrates with the MJ data context system for contextual understanding.
|
|
16
|
+
|
|
17
|
+
```mermaid
|
|
18
|
+
flowchart TD
|
|
19
|
+
subgraph Chat["SkipChatComponent"]
|
|
20
|
+
A["Conversation List"] --> B["Message Thread"]
|
|
21
|
+
B --> C["User Input"]
|
|
22
|
+
C --> D["Skip AI API"]
|
|
23
|
+
D --> E["AI Response"]
|
|
24
|
+
E --> F["Dynamic Reports"]
|
|
25
|
+
E --> G["Inline Artifacts"]
|
|
26
|
+
end
|
|
27
|
+
subgraph Reports["Dynamic Report Components"]
|
|
28
|
+
H["Charts (Plotly)"]
|
|
29
|
+
I["Data Grids (Kendo)"]
|
|
30
|
+
J["HTML Reports"]
|
|
31
|
+
K["Linear Reports"]
|
|
32
|
+
end
|
|
33
|
+
subgraph Artifacts["Artifact System"]
|
|
34
|
+
L["Split Panel View"]
|
|
35
|
+
M["Artifact Indicator"]
|
|
36
|
+
N["Artifact Viewer"]
|
|
37
|
+
end
|
|
38
|
+
|
|
39
|
+
F --> Reports
|
|
40
|
+
G --> Artifacts
|
|
41
|
+
|
|
42
|
+
style Chat fill:#2d6a9f,stroke:#1a4971,color:#fff
|
|
43
|
+
style Reports fill:#7c5295,stroke:#563a6b,color:#fff
|
|
44
|
+
style Artifacts fill:#2d8659,stroke:#1a5c3a,color:#fff
|
|
45
|
+
```
|
|
46
|
+
|
|
26
47
|
## Usage
|
|
27
48
|
|
|
28
|
-
### Import
|
|
49
|
+
### Module Import
|
|
29
50
|
|
|
30
51
|
```typescript
|
|
31
52
|
import { SkipChatModule } from '@memberjunction/ng-skip-chat';
|
|
32
53
|
|
|
33
54
|
@NgModule({
|
|
34
|
-
imports: [
|
|
35
|
-
SkipChatModule,
|
|
36
|
-
// other imports
|
|
37
|
-
],
|
|
38
|
-
// ...
|
|
55
|
+
imports: [SkipChatModule]
|
|
39
56
|
})
|
|
40
|
-
export class YourModule {
|
|
57
|
+
export class YourModule {}
|
|
41
58
|
```
|
|
42
59
|
|
|
43
|
-
### Basic
|
|
60
|
+
### Basic Usage
|
|
44
61
|
|
|
45
62
|
```html
|
|
46
|
-
<!-- Basic Skip Chat integration -->
|
|
47
63
|
<skip-chat
|
|
48
64
|
[Title]="'Ask Skip'"
|
|
49
65
|
[ShowConversationList]="true"
|
|
50
66
|
[SkipLogoURL]="'assets/Skip-Logo.png'"
|
|
51
|
-
[SkipMarkOnlyLogoURL]="'assets/Skip-Icon.png'"
|
|
52
67
|
(NavigateToMatchingReport)="handleReportNavigation($event)"
|
|
53
68
|
(NewReportCreated)="handleNewReport($event)">
|
|
54
69
|
</skip-chat>
|
|
@@ -57,427 +72,66 @@ export class YourModule { }
|
|
|
57
72
|
### Embedded in Entity Record
|
|
58
73
|
|
|
59
74
|
```html
|
|
60
|
-
<!-- Skip Chat embedded in an entity record view -->
|
|
61
75
|
<skip-chat
|
|
62
|
-
[Title]="'Product Assistant'"
|
|
63
76
|
[LinkedEntity]="'Products'"
|
|
64
77
|
[LinkedEntityCompositeKey]="productKey"
|
|
65
78
|
[ShowConversationList]="false"
|
|
66
|
-
[IncludeLinkedConversationsInList]="true"
|
|
67
79
|
[UpdateAppRoute]="false">
|
|
68
80
|
</skip-chat>
|
|
69
81
|
```
|
|
70
82
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
padding: 20px;
|
|
115
|
-
}
|
|
116
|
-
.main-content {
|
|
117
|
-
flex: 1;
|
|
118
|
-
padding: 20px;
|
|
119
|
-
overflow: hidden;
|
|
120
|
-
}
|
|
121
|
-
`]
|
|
122
|
-
})
|
|
123
|
-
export class AnalyticsDashboardComponent implements OnInit {
|
|
124
|
-
customWelcomeQuestions: ChatWelcomeQuestion[] = [
|
|
125
|
-
{
|
|
126
|
-
topLine: 'Sales Analysis',
|
|
127
|
-
bottomLine: 'Analyze sales trends by region',
|
|
128
|
-
prompt: 'Can you analyze our sales data by region and show me the trends over the last year?'
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
topLine: 'Customer Insights',
|
|
132
|
-
bottomLine: 'Identify top customer segments',
|
|
133
|
-
prompt: 'What are our most valuable customer segments and how are they performing?'
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
topLine: 'Inventory Report',
|
|
137
|
-
bottomLine: 'Check stock levels and reorder needs',
|
|
138
|
-
prompt: 'Create a report showing inventory levels across warehouses and identify items that need to be reordered'
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
topLine: 'Marketing ROI',
|
|
142
|
-
bottomLine: 'Measure campaign effectiveness',
|
|
143
|
-
prompt: 'Calculate the ROI for our recent marketing campaigns and recommend areas for improvement'
|
|
144
|
-
}
|
|
145
|
-
];
|
|
146
|
-
|
|
147
|
-
constructor(
|
|
148
|
-
private router: Router,
|
|
149
|
-
private notificationService: MJNotificationService
|
|
150
|
-
) {}
|
|
151
|
-
|
|
152
|
-
ngOnInit() {
|
|
153
|
-
// Any initialization code
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
navigateToReport(reportId: string) {
|
|
157
|
-
this.router.navigate(['/reports', reportId]);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
handleNewReport(reportId: string) {
|
|
161
|
-
this.notificationService.CreateSimpleNotification(
|
|
162
|
-
`New report created (ID: ${reportId})`,
|
|
163
|
-
'success',
|
|
164
|
-
3000
|
|
165
|
-
);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
onConversationSelected(conversationId: string) {
|
|
169
|
-
console.log(`Conversation selected: ${conversationId}`);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
showReports() {
|
|
173
|
-
this.router.navigate(['/reports']);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
showDashboards() {
|
|
177
|
-
this.router.navigate(['/dashboards']);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
showSettings() {
|
|
181
|
-
this.router.navigate(['/settings']);
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
## Inline Artifacts Support
|
|
187
|
-
|
|
188
|
-
Skip Chat provides an intuitive way to work with AI-generated artifacts directly within the conversation flow. Artifacts are standalone content pieces created during AI conversations, such as:
|
|
189
|
-
|
|
190
|
-
- Code snippets
|
|
191
|
-
- Data analyses and visualizations
|
|
192
|
-
- Documents and reports
|
|
193
|
-
- SQL queries
|
|
194
|
-
- JSON data structures
|
|
195
|
-
- Markdown content
|
|
196
|
-
- Plain text notes
|
|
197
|
-
|
|
198
|
-
### Artifact Display Design
|
|
199
|
-
|
|
200
|
-
Artifacts are integrated directly into the conversation with a contextual, streamlined approach:
|
|
201
|
-
|
|
202
|
-
1. **Inline Indicators**: When a message has a linked artifact (as indicated by ArtifactID in the ConversationDetailEntity), a visual indicator/box appears within that message
|
|
203
|
-
|
|
204
|
-
2. **Split-Panel View**: Clicking on an artifact indicator dynamically splits the screen:
|
|
205
|
-
- Left panel: Continues displaying the conversation messages
|
|
206
|
-
- Right panel: Shows the selected artifact's content
|
|
207
|
-
- Draggable splitter between panels for customizing the view ratio
|
|
208
|
-
|
|
209
|
-
3. **Artifact Creation Flow**: Skip can request artifact creation or versioning during analysis completion (SkipAPIAnalysisComplete)
|
|
210
|
-
|
|
211
|
-
### Artifact-Message Relationship
|
|
212
|
-
|
|
213
|
-
Each `ConversationDetailEntity` can have:
|
|
214
|
-
- `ArtifactID`: Links to the specific artifact created or referenced by this message
|
|
215
|
-
- `ArtifactVersionID`: Tracks which version of the artifact is associated with this message
|
|
216
|
-
|
|
217
|
-
### Artifact Components
|
|
218
|
-
|
|
219
|
-
The package includes specialized components for artifact handling:
|
|
220
|
-
|
|
221
|
-
- **SkipMessageArtifactIndicatorComponent**: Displays the artifact indicator within messages
|
|
222
|
-
- **SkipArtifactViewerComponent**: Renders artifact content in the right panel
|
|
223
|
-
- **SkipSplitPanelComponent**: Manages the split-panel layout with draggable divider
|
|
224
|
-
|
|
225
|
-
### Artifact Events
|
|
226
|
-
|
|
227
|
-
The Skip Chat components provide event emitters for artifact interactions:
|
|
228
|
-
|
|
229
|
-
```typescript
|
|
230
|
-
// Listen for artifact events
|
|
231
|
-
<skip-chat
|
|
232
|
-
(ArtifactSelected)="handleArtifactSelected($event)"
|
|
233
|
-
(ArtifactViewed)="handleArtifactViewed($event)">
|
|
234
|
-
</skip-chat>
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
Handle artifact events in your component:
|
|
238
|
-
|
|
239
|
-
```typescript
|
|
240
|
-
import { SkipAPIArtifact } from '@memberjunction/skip-types';
|
|
241
|
-
|
|
242
|
-
@Component({...})
|
|
243
|
-
export class MyComponent {
|
|
244
|
-
handleArtifactSelected(artifact: SkipAPIArtifact) {
|
|
245
|
-
console.log(`Selected artifact: ${artifact.name}`);
|
|
246
|
-
// Custom handling of artifact selection
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
handleArtifactViewed(artifact: SkipAPIArtifact) {
|
|
250
|
-
console.log(`Viewing artifact: ${artifact.name}`);
|
|
251
|
-
// Custom handling for artifact viewing
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
## API Reference
|
|
257
|
-
|
|
258
|
-
### SkipChatComponent
|
|
259
|
-
|
|
260
|
-
The main component for the Skip chat interface.
|
|
261
|
-
|
|
262
|
-
#### Inputs
|
|
263
|
-
|
|
264
|
-
- `Title`: string - Title for the chat interface (default: 'Ask Skip')
|
|
265
|
-
- `ShowConversationList`: boolean - Whether to show the conversation list (default: true)
|
|
266
|
-
- `AllowNewConversations`: boolean - Whether to allow creating new conversations (default: true)
|
|
267
|
-
- `SkipLogoURL`: string - URL for the Skip logo
|
|
268
|
-
- `SkipMarkOnlyLogoURL`: string - URL for the Skip icon logo
|
|
269
|
-
- `UserImage`: string | Blob - Image for the user avatar
|
|
270
|
-
- `DefaultTextboxPlaceholder`: string - Placeholder text for the input field
|
|
271
|
-
- `ProcessingTextBoxPlaceholder`: string - Placeholder text during processing
|
|
272
|
-
- `Messages`: ConversationDetailEntity[] - Array of conversation messages
|
|
273
|
-
- `Conversations`: ConversationEntity[] - Array of available conversations
|
|
274
|
-
- `SelectedConversation`: ConversationEntity - Currently selected conversation
|
|
275
|
-
- `DataContextID`: string - ID of the data context
|
|
276
|
-
- `LinkedEntity`: string - Name of the linked entity
|
|
277
|
-
- `LinkedEntityCompositeKey`: CompositeKey - Key for the linked entity record
|
|
278
|
-
- `ShowDataContextButton`: boolean - Whether to show the data context button (default: true)
|
|
279
|
-
- `IncludeLinkedConversationsInList`: boolean - Whether to include linked conversations (default: false)
|
|
280
|
-
- `UpdateAppRoute`: boolean - Whether to update the browser URL (default: true)
|
|
281
|
-
- `ShowSkipLogoInConversationList`: boolean - Whether to show the Skip logo in the conversation list (default: false)
|
|
282
|
-
- `ShowSharingButton`: boolean - Whether to show the sharing button (default: true)
|
|
283
|
-
- `SharingExcludeRoleNames`: string[] - Role names to exclude from sharing
|
|
284
|
-
- `SharingExcludeEmails`: string[] - User emails to exclude from sharing
|
|
285
|
-
- `WelcomeQuestions`: ChatWelcomeQuestion[] - Array of welcome questions/prompts
|
|
286
|
-
- Each ChatWelcomeQuestion has: `topLine` (main title), `bottomLine` (subtitle), `prompt` (actual message sent)
|
|
287
|
-
- `AutoLoad`: boolean - Whether to automatically load data (default: true)
|
|
288
|
-
- `VerboseLogging`: boolean - Whether to enable verbose logging (default: false)
|
|
289
|
-
- `EnableArtifactSplitView`: boolean - Whether to enable split-panel viewing for artifacts (default: true)
|
|
290
|
-
- `DefaultSplitRatio`: number - Default ratio for split panels when viewing artifacts (0-1, default: 0.6)
|
|
291
|
-
|
|
292
|
-
#### Outputs
|
|
293
|
-
|
|
294
|
-
- `NavigateToMatchingReport`: EventEmitter<string> - Emitted when a matching report is clicked
|
|
295
|
-
- `ConversationSelected`: EventEmitter<string> - Emitted when a conversation is selected
|
|
296
|
-
- `NewReportCreated`: EventEmitter<string> - Emitted when a new report is created
|
|
297
|
-
- `ArtifactSelected`: EventEmitter<SkipAPIArtifact> - Emitted when an artifact is selected
|
|
298
|
-
- `ArtifactViewed`: EventEmitter<SkipAPIArtifact> - Emitted when an artifact is viewed
|
|
299
|
-
|
|
300
|
-
#### Methods
|
|
301
|
-
|
|
302
|
-
- `Load(forceRefresh: boolean)`: Loads conversations and messages
|
|
303
|
-
- `Refresh()`: Refreshes data from the server
|
|
304
|
-
- `CreateNewConversation()`: Creates a new conversation
|
|
305
|
-
- `SelectConversation(conversation: ConversationEntity)`: Selects a conversation
|
|
306
|
-
- `sendPrompt(val: string)`: Sends a prompt to Skip AI
|
|
307
|
-
- `sendSkipMessage()`: Sends the current message in the input box
|
|
308
|
-
- `FlipEmbeddedConversationState()`: Toggles the inclusion of linked conversations
|
|
309
|
-
- `ViewArtifact(artifactId: string)`: Opens an artifact in the split panel view
|
|
310
|
-
|
|
311
|
-
### SkipSingleMessageComponent
|
|
312
|
-
|
|
313
|
-
Component for rendering a single message in the conversation.
|
|
314
|
-
|
|
315
|
-
#### Inputs
|
|
316
|
-
|
|
317
|
-
- `ConversationRecord`: ConversationEntity - The conversation this message belongs to
|
|
318
|
-
- `ConversationDetailRecord`: ConversationDetailEntity - The message details
|
|
319
|
-
- `ConversationUser`: UserInfo - User who owns the conversation
|
|
320
|
-
- `DataContext`: DataContext - Data context for the conversation
|
|
321
|
-
- `ConversationMessages`: ConversationDetailEntity[] - All messages in the conversation
|
|
322
|
-
- `ConversationProcessing`: boolean - Whether the conversation is processing
|
|
323
|
-
- `SkipMarkOnlyLogoURL`: string - URL for the Skip icon logo
|
|
324
|
-
- `UserImage`: string | Blob - Image for the user avatar
|
|
325
|
-
- `ShowMessageEditPanel`: boolean - Whether to show edit controls (default: true)
|
|
326
|
-
- `ShowMessageRating`: boolean - Whether to show message rating controls (default: true)
|
|
327
|
-
|
|
328
|
-
#### Outputs
|
|
329
|
-
|
|
330
|
-
- `SuggestedQuestionSelected`: EventEmitter<string> - Emitted when a suggested question is selected
|
|
331
|
-
- `SuggestedAnswerSelected`: EventEmitter<string> - Emitted when a suggested answer is selected
|
|
332
|
-
- `NavigateToMatchingReport`: EventEmitter<string> - Emitted when a matching report is clicked
|
|
333
|
-
- `NewReportCreated`: EventEmitter<string> - Emitted when a new report is created
|
|
334
|
-
- `EditMessageRequested`: EventEmitter<ConversationDetailEntity> - Emitted when message edit is requested
|
|
335
|
-
- `DeleteMessageRequested`: EventEmitter<ConversationDetailEntity> - Emitted when message delete is requested
|
|
336
|
-
- `ArtifactSelected`: EventEmitter<SkipAPIArtifact> - Emitted when an artifact indicator is selected
|
|
337
|
-
|
|
338
|
-
### SkipSplitPanelComponent
|
|
339
|
-
|
|
340
|
-
Component for managing the split-panel layout.
|
|
341
|
-
|
|
342
|
-
#### Inputs
|
|
343
|
-
|
|
344
|
-
- `SplitRatio`: number - Ratio for dividing the panels (0-1, default: 0.6)
|
|
345
|
-
- `MinLeftPanelWidth`: string - Minimum width for left panel (default: '30%')
|
|
346
|
-
- `MinRightPanelWidth`: string - Minimum width for right panel (default: '30%')
|
|
347
|
-
- `LeftPanelContent`: TemplateRef<any> - Template for left panel content
|
|
348
|
-
- `RightPanelContent`: TemplateRef<any> - Template for right panel content
|
|
349
|
-
|
|
350
|
-
#### Outputs
|
|
351
|
-
|
|
352
|
-
- `SplitRatioChanged`: EventEmitter<number> - Emitted when split ratio changes via drag
|
|
353
|
-
|
|
354
|
-
### Dynamic Report Components
|
|
355
|
-
|
|
356
|
-
The package includes several components for rendering dynamic reports:
|
|
357
|
-
|
|
358
|
-
- `SkipDynamicReportWrapperComponent`: Main wrapper for reports
|
|
359
|
-
- `SkipDynamicLinearReportComponent`: For linear report layouts
|
|
360
|
-
- `SkipDynamicChartComponent`: For chart visualizations
|
|
361
|
-
- `SkipDynamicGridComponent`: For data grid displays
|
|
362
|
-
- `SkipDynamicHTMLReportComponent`: For HTML formatted reports
|
|
363
|
-
- `SkipArtifactsCounterComponent`: For displaying artifact count badges
|
|
364
|
-
|
|
365
|
-
### Utility Classes
|
|
366
|
-
|
|
367
|
-
#### DrillDownInfo
|
|
368
|
-
|
|
369
|
-
A utility class for managing drill-down operations within reports.
|
|
370
|
-
|
|
371
|
-
```typescript
|
|
372
|
-
import { DrillDownInfo } from '@memberjunction/ng-skip-chat';
|
|
373
|
-
|
|
374
|
-
const drillDown = new DrillDownInfo('Customers', 'Country = "USA"');
|
|
375
|
-
drillDown.BaseFilter = 'Active = 1'; // Optional base filter
|
|
376
|
-
|
|
377
|
-
// Get parameters for UserViewGrid
|
|
378
|
-
const gridParams = drillDown.UserViewGridParams;
|
|
379
|
-
// Returns: { EntityName: 'Customers', ExtraFilter: '(Country = "USA") AND (Active = 1)' }
|
|
380
|
-
```
|
|
381
|
-
|
|
382
|
-
#### SkipConversationReportCache
|
|
383
|
-
|
|
384
|
-
A singleton cache manager for conversation reports to minimize network requests.
|
|
385
|
-
|
|
386
|
-
```typescript
|
|
387
|
-
import { SkipConversationReportCache } from '@memberjunction/ng-skip-chat';
|
|
388
|
-
|
|
389
|
-
// Get reports for a conversation (cached after first load)
|
|
390
|
-
const reports = await SkipConversationReportCache.Instance.GetConversationReports(
|
|
391
|
-
conversationId,
|
|
392
|
-
provider, // optional IRunViewProvider
|
|
393
|
-
forceRefresh // optional boolean to force reload
|
|
394
|
-
);
|
|
395
|
-
|
|
396
|
-
// Add a new report to cache
|
|
397
|
-
SkipConversationReportCache.Instance.AddConversationReport(conversationId, reportEntity);
|
|
398
|
-
|
|
399
|
-
// Update existing report in cache
|
|
400
|
-
SkipConversationReportCache.Instance.UpdateConversationReport(conversationId, reportEntity);
|
|
401
|
-
|
|
402
|
-
// Remove report from cache
|
|
403
|
-
SkipConversationReportCache.Instance.RemoveConversationReport(conversationId, reportId);
|
|
404
|
-
```
|
|
405
|
-
|
|
406
|
-
## Conversation Flow
|
|
407
|
-
|
|
408
|
-
1. **Initialization**: Load existing conversations or create a new one
|
|
409
|
-
2. **User Input**: User enters a message or selects a suggested prompt
|
|
410
|
-
3. **AI Processing**: Skip processes the request and generates a response
|
|
411
|
-
4. **Artifact Creation**: Skip can generate artifacts during response processing
|
|
412
|
-
5. **Artifact Viewing**: Users can view artifacts in the split-panel interface
|
|
413
|
-
6. **Report Generation**: For data analysis requests, Skip generates dynamic reports
|
|
414
|
-
7. **Follow-up**: Skip suggests follow-up questions and provides interaction with the data
|
|
415
|
-
|
|
416
|
-
## Styling
|
|
417
|
-
|
|
418
|
-
The component includes extensive CSS styling that can be customized to match your application's design. Key CSS classes include:
|
|
419
|
-
|
|
420
|
-
- `.skip-chat-container`: Main container for the entire component
|
|
421
|
-
- `.conversation-list`: Styles for the conversation list panel
|
|
422
|
-
- `.chat-messages`: Container for message display
|
|
423
|
-
- `.skip-message`: Individual message styling
|
|
424
|
-
- `.artifact-indicator`: Styling for artifact indicators in messages
|
|
425
|
-
- `.split-panel`: Split panel container styling
|
|
426
|
-
- `.welcome-screen`: Welcome screen with suggested prompts
|
|
427
|
-
|
|
428
|
-
## Module Configuration
|
|
429
|
-
|
|
430
|
-
When importing the SkipChatModule, ensure your application includes:
|
|
431
|
-
|
|
432
|
-
1. **Font Awesome**: Required for icons throughout the component
|
|
433
|
-
2. **Angular CDK**: Required for overlay functionality
|
|
434
|
-
3. **Kendo UI Theme**: Required for Kendo components (grid, dialogs, etc.)
|
|
435
|
-
|
|
436
|
-
```typescript
|
|
437
|
-
// In your app.module.ts or feature module
|
|
438
|
-
import { SkipChatModule } from '@memberjunction/ng-skip-chat';
|
|
439
|
-
import { MarkdownModule } from '@memberjunction/ng-markdown';
|
|
440
|
-
|
|
441
|
-
@NgModule({
|
|
442
|
-
imports: [
|
|
443
|
-
SkipChatModule,
|
|
444
|
-
MarkdownModule, // Already included in SkipChatModule but may be needed at app level
|
|
445
|
-
// ... other imports
|
|
446
|
-
]
|
|
447
|
-
})
|
|
448
|
-
export class AppModule { }
|
|
449
|
-
```
|
|
450
|
-
|
|
451
|
-
## Build and Deployment Notes
|
|
452
|
-
|
|
453
|
-
- This package is built using Angular's ng-packagr
|
|
454
|
-
- Ensure all peer dependencies are installed at the correct versions
|
|
455
|
-
- The package uses TypeScript strict mode
|
|
456
|
-
- All Kendo UI components must have a valid license for production use
|
|
83
|
+
## Key Inputs
|
|
84
|
+
|
|
85
|
+
| Property | Type | Default | Description |
|
|
86
|
+
|----------|------|---------|-------------|
|
|
87
|
+
| `Title` | `string` | `'Ask Skip'` | Chat interface title |
|
|
88
|
+
| `ShowConversationList` | `boolean` | `true` | Show the conversation sidebar |
|
|
89
|
+
| `AllowNewConversations` | `boolean` | `true` | Allow creating conversations |
|
|
90
|
+
| `SkipLogoURL` | `string` | -- | URL for the Skip logo image |
|
|
91
|
+
| `LinkedEntity` | `string` | -- | Entity name for embedded context |
|
|
92
|
+
| `LinkedEntityCompositeKey` | `CompositeKey` | -- | Record key for embedded context |
|
|
93
|
+
| `ShowDataContextButton` | `boolean` | `true` | Show data context button |
|
|
94
|
+
| `ShowSharingButton` | `boolean` | `true` | Show conversation sharing button |
|
|
95
|
+
| `EnableArtifactSplitView` | `boolean` | `true` | Enable split-panel artifact viewing |
|
|
96
|
+
| `WelcomeQuestions` | `ChatWelcomeQuestion[]` | -- | Custom welcome screen prompts |
|
|
97
|
+
| `UpdateAppRoute` | `boolean` | `true` | Update browser URL on navigation |
|
|
98
|
+
| `AutoLoad` | `boolean` | `true` | Auto-load data on initialization |
|
|
99
|
+
|
|
100
|
+
## Key Outputs
|
|
101
|
+
|
|
102
|
+
| Event | Type | Description |
|
|
103
|
+
|-------|------|-------------|
|
|
104
|
+
| `NavigateToMatchingReport` | `EventEmitter<string>` | Report navigation requested |
|
|
105
|
+
| `ConversationSelected` | `EventEmitter<string>` | Conversation selected from list |
|
|
106
|
+
| `NewReportCreated` | `EventEmitter<string>` | A report was created by Skip |
|
|
107
|
+
| `ArtifactSelected` | `EventEmitter<SkipAPIArtifact>` | Artifact indicator clicked |
|
|
108
|
+
|
|
109
|
+
## Components
|
|
110
|
+
|
|
111
|
+
| Component | Purpose |
|
|
112
|
+
|-----------|---------|
|
|
113
|
+
| `SkipChatComponent` | Main chat interface |
|
|
114
|
+
| `SkipSingleMessageComponent` | Individual message renderer |
|
|
115
|
+
| `SkipSplitPanelComponent` | Resizable split panel for artifacts |
|
|
116
|
+
| `SkipDynamicReportWrapperComponent` | Report container |
|
|
117
|
+
| `SkipDynamicChartComponent` | Plotly chart rendering |
|
|
118
|
+
| `SkipDynamicGridComponent` | Kendo grid for data display |
|
|
119
|
+
| `SkipDynamicHTMLReportComponent` | HTML report rendering |
|
|
120
|
+
| `SkipArtifactsCounterComponent` | Artifact count badge |
|
|
121
|
+
|
|
122
|
+
## Utility Classes
|
|
123
|
+
|
|
124
|
+
- `DrillDownInfo` -- Manages drill-down operations within reports
|
|
125
|
+
- `SkipConversationReportCache` -- Singleton cache for conversation reports
|
|
457
126
|
|
|
458
127
|
## Dependencies
|
|
459
128
|
|
|
460
|
-
-
|
|
461
|
-
-
|
|
462
|
-
-
|
|
463
|
-
-
|
|
464
|
-
-
|
|
465
|
-
-
|
|
466
|
-
-
|
|
467
|
-
-
|
|
468
|
-
- `@progress/kendo-angular-
|
|
469
|
-
- `@progress/kendo-angular-dialog`: For dialog components
|
|
470
|
-
- `@memberjunction/ng-markdown`: For markdown rendering
|
|
471
|
-
- `plotly.js-dist-min`: For chart rendering
|
|
472
|
-
- `@angular/cdk`: For overlay functionality
|
|
473
|
-
|
|
474
|
-
## Version Compatibility
|
|
475
|
-
|
|
476
|
-
This package requires:
|
|
477
|
-
- Angular 21 or compatible version
|
|
478
|
-
- TypeScript 4.9 or higher
|
|
479
|
-
- Node.js 16 or higher
|
|
480
|
-
|
|
481
|
-
## License
|
|
482
|
-
|
|
483
|
-
This package is part of the MemberJunction framework. See the main repository for license information.
|
|
129
|
+
- [@memberjunction/core](../../MJCore/README.md) -- Metadata, entity framework
|
|
130
|
+
- [@memberjunction/core-entities](../../MJCoreEntities/README.md) -- Conversation entities
|
|
131
|
+
- [@memberjunction/skip-types](../../Skip/SkipTypes/README.md) -- Skip API response types
|
|
132
|
+
- [@memberjunction/data-context](../../MJDataContext/README.md) -- Data context management
|
|
133
|
+
- [@memberjunction/ng-markdown](../markdown/README.md) -- Markdown rendering in messages
|
|
134
|
+
- [@memberjunction/ng-notifications](../notifications/README.md) -- Notification service
|
|
135
|
+
- [@memberjunction/ng-resource-permissions](../resource-permissions/README.md) -- Conversation sharing
|
|
136
|
+
- `plotly.js-dist-min` -- Chart rendering
|
|
137
|
+
- `@progress/kendo-angular-grid` -- Data grid
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-skip-chat",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"deprecated": "This package is deprecated. Use @memberjunction/ng-conversations instead.",
|
|
5
5
|
"description": "DEPRECATED: Use @memberjunction/ng-conversations instead. MemberJunction: Simple Skip Chat components usable in any Angular project",
|
|
6
6
|
"main": "./dist/public-api.js",
|
|
@@ -29,22 +29,22 @@
|
|
|
29
29
|
"@angular/cdk": "21.1.3",
|
|
30
30
|
"@angular/router": "21.1.3",
|
|
31
31
|
"@codemirror/view": "latest",
|
|
32
|
-
"@memberjunction/core": "4.
|
|
33
|
-
"@memberjunction/core-entities": "4.
|
|
34
|
-
"@memberjunction/data-context": "4.
|
|
35
|
-
"@memberjunction/global": "4.
|
|
36
|
-
"@memberjunction/graphql-dataprovider": "4.
|
|
37
|
-
"@memberjunction/interactive-component-types": "4.
|
|
38
|
-
"@memberjunction/ng-base-types": "4.
|
|
39
|
-
"@memberjunction/ng-code-editor": "4.
|
|
40
|
-
"@memberjunction/ng-container-directives": "4.
|
|
41
|
-
"@memberjunction/ng-data-context": "4.
|
|
42
|
-
"@memberjunction/ng-notifications": "4.
|
|
43
|
-
"@memberjunction/ng-react": "4.
|
|
44
|
-
"@memberjunction/ng-resource-permissions": "4.
|
|
45
|
-
"@memberjunction/ng-shared-generic": "4.
|
|
46
|
-
"@memberjunction/react-runtime": "4.
|
|
47
|
-
"@memberjunction/skip-types": "4.
|
|
32
|
+
"@memberjunction/core": "4.2.0",
|
|
33
|
+
"@memberjunction/core-entities": "4.2.0",
|
|
34
|
+
"@memberjunction/data-context": "4.2.0",
|
|
35
|
+
"@memberjunction/global": "4.2.0",
|
|
36
|
+
"@memberjunction/graphql-dataprovider": "4.2.0",
|
|
37
|
+
"@memberjunction/interactive-component-types": "4.2.0",
|
|
38
|
+
"@memberjunction/ng-base-types": "4.2.0",
|
|
39
|
+
"@memberjunction/ng-code-editor": "4.2.0",
|
|
40
|
+
"@memberjunction/ng-container-directives": "4.2.0",
|
|
41
|
+
"@memberjunction/ng-data-context": "4.2.0",
|
|
42
|
+
"@memberjunction/ng-notifications": "4.2.0",
|
|
43
|
+
"@memberjunction/ng-react": "4.2.0",
|
|
44
|
+
"@memberjunction/ng-resource-permissions": "4.2.0",
|
|
45
|
+
"@memberjunction/ng-shared-generic": "4.2.0",
|
|
46
|
+
"@memberjunction/react-runtime": "4.2.0",
|
|
47
|
+
"@memberjunction/skip-types": "4.2.0",
|
|
48
48
|
"@progress/kendo-angular-buttons": "22.0.1",
|
|
49
49
|
"@progress/kendo-angular-dialog": "22.0.1",
|
|
50
50
|
"@progress/kendo-angular-dropdowns": "22.0.1",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@progress/kendo-angular-layout": "22.0.1",
|
|
57
57
|
"@progress/kendo-angular-listview": "22.0.1",
|
|
58
58
|
"@progress/kendo-angular-notification": "22.0.1",
|
|
59
|
-
"@memberjunction/ng-markdown": "4.
|
|
59
|
+
"@memberjunction/ng-markdown": "4.2.0",
|
|
60
60
|
"marked": "^17.0.1",
|
|
61
61
|
"rxjs": "^7.8.2",
|
|
62
62
|
"tslib": "^2.8.1"
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
|
|
2
|
-
import { SkipAPIAnalysisCompleteResponse } from '@memberjunction/skip-types';
|
|
3
|
-
import { PlotlyComponent } from 'angular-plotly.js';
|
|
4
|
-
import { DrillDownInfo } from '../drill-down-info';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export declare class SkipDynamicChartComponent implements OnInit, OnDestroy {
|
|
7
|
-
private el;
|
|
8
|
-
plotData: any;
|
|
9
|
-
plotLayout: any;
|
|
10
|
-
defaultPlotHeight: number;
|
|
11
|
-
ShowSaveAsImage: boolean;
|
|
12
|
-
AllowDrillDown: boolean;
|
|
13
|
-
AutoResizeChart: boolean;
|
|
14
|
-
DrillDownEvent: EventEmitter<DrillDownInfo>;
|
|
15
|
-
plotlyPlot: PlotlyComponent;
|
|
16
|
-
plotContainer: ElementRef;
|
|
17
|
-
private resizeObserver;
|
|
18
|
-
constructor(el: ElementRef);
|
|
19
|
-
ngOnInit(): void;
|
|
20
|
-
ngOnDestroy(): void;
|
|
21
|
-
SaveChartAsImage(): Promise<void>;
|
|
22
|
-
handleChartClick(chartClickEvent: any): Promise<void>;
|
|
23
|
-
setupResizeObserver(): void;
|
|
24
|
-
updateChartHeight(newHeight: number): void;
|
|
25
|
-
updateChartSize(newHeight: number, newWidth: number): void;
|
|
26
|
-
private _skipData;
|
|
27
|
-
get SkipData(): SkipAPIAnalysisCompleteResponse | undefined;
|
|
28
|
-
set SkipData(d: SkipAPIAnalysisCompleteResponse | undefined);
|
|
29
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<SkipDynamicChartComponent, never>;
|
|
30
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SkipDynamicChartComponent, "skip-dynamic-chart", never, { "plotData": { "alias": "plotData"; "required": false; }; "plotLayout": { "alias": "plotLayout"; "required": false; }; "defaultPlotHeight": { "alias": "defaultPlotHeight"; "required": false; }; "ShowSaveAsImage": { "alias": "ShowSaveAsImage"; "required": false; }; "AllowDrillDown": { "alias": "AllowDrillDown"; "required": false; }; "AutoResizeChart": { "alias": "AutoResizeChart"; "required": false; }; "SkipData": { "alias": "SkipData"; "required": false; }; }, { "DrillDownEvent": "DrillDownEvent"; }, never, never, false, never>;
|
|
31
|
-
}
|
|
32
|
-
//# sourceMappingURL=dynamic-chart.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dynamic-chart.d.ts","sourceRoot":"","sources":["../../../src/lib/dynamic-report/dynamic-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,YAAY,EAAS,SAAS,EAAE,MAAM,EAAqB,MAAM,eAAe,CAAC;AAEjH,OAAO,EAAE,+BAA+B,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;;AAGnD,qBAmBa,yBAA0B,YAAW,MAAM,EAAE,SAAS;IAcnD,OAAO,CAAC,EAAE;IAbb,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAO;IAChC,eAAe,EAAE,OAAO,CAAQ;IAChC,cAAc,EAAE,OAAO,CAAO;IAC9B,eAAe,EAAE,OAAO,CAAQ;IAC/B,cAAc,8BAAqC;IAEpC,UAAU,EAAG,eAAe,CAAC;IAC1B,aAAa,EAAG,UAAU,CAAC;IAEvD,OAAO,CAAC,cAAc,CAA6B;gBAE/B,EAAE,EAAE,UAAU;IAElC,QAAQ;IAKR,WAAW;IAME,gBAAgB;IAwBhB,gBAAgB,CAAC,eAAe,EAAE,GAAG;IA6BlD,mBAAmB;IAenB,iBAAiB,CAAC,SAAS,EAAE,MAAM;IAInC,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAUnD,OAAO,CAAC,SAAS,CAA8C;IAC/D,IAAa,QAAQ,IAAI,+BAA+B,GAAG,SAAS,CAEnE;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,+BAA+B,GAAG,SAAS,EAU1D;yCA3HQ,yBAAyB;2CAAzB,yBAAyB;CA4HrC"}
|