test-chat-component-per 1.0.1
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/LICENSE +29 -0
- package/README.md +298 -0
- package/dist/delachat-webcomponent.js +683 -0
- package/dist/delachat-webcomponent.min.js +1 -0
- package/dist/delachat-webcomponent.min.js.map +1 -0
- package/package.json +66 -0
- package/src/delachat-webcomponent.js +683 -0
- package/src/delachat.css +430 -0
- package/src/delachat.js +580 -0
- package/src/index.html +343 -0
- package/src/webcomponent-demo.html +452 -0
- package/types/index.d.ts +130 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
PROPRIETARY SOFTWARE LICENSE
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Deltek, Inc. All rights reserved.
|
|
4
|
+
|
|
5
|
+
This software and associated documentation files (the "Software") are proprietary
|
|
6
|
+
to Deltek, Inc. and are protected by copyright law and international treaties.
|
|
7
|
+
|
|
8
|
+
NOTICE TO USER:
|
|
9
|
+
|
|
10
|
+
This Software is the property of Deltek, Inc. and is licensed, not sold. Title
|
|
11
|
+
to the Software remains with Deltek, Inc.
|
|
12
|
+
|
|
13
|
+
RESTRICTIONS:
|
|
14
|
+
|
|
15
|
+
1. The Software may only be used by authorized Deltek customers and partners.
|
|
16
|
+
2. You may not modify, reverse engineer, decompile, or disassemble the Software.
|
|
17
|
+
3. You may not rent, lease, loan, sublicense, or distribute the Software.
|
|
18
|
+
4. You may not remove or alter any copyright notices from the Software.
|
|
19
|
+
|
|
20
|
+
DISCLAIMER:
|
|
21
|
+
|
|
22
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
23
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
24
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
25
|
+
DELTEK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
|
|
26
|
+
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
27
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
28
|
+
|
|
29
|
+
For licensing inquiries, contact: legal@deltek.com
|
package/README.md
ADDED
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
# DelaChat Web Component
|
|
2
|
+
|
|
3
|
+
A universal AI chat component for Deltek PPM applications. Built as a standard Web Component, it works seamlessly across all frameworks and platforms.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ✅ **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JavaScript
|
|
8
|
+
- ✅ **Shadow DOM Encapsulation** - Styles don't leak or conflict
|
|
9
|
+
- ✅ **Zero Dependencies** - Pure Web Standards (Custom Elements API)
|
|
10
|
+
- ✅ **TypeScript Support** - Includes type definitions
|
|
11
|
+
- ✅ **Responsive** - Works on desktop and mobile
|
|
12
|
+
- ✅ **Session Management** - Integrates with PPM.Auth sessions
|
|
13
|
+
- ✅ **Event-Driven** - Listen to messages, errors, and state changes
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
### NPM
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install chat-component
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### CDN
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<script src="https://cdn.company.com/delachat/v1.0.0/delachat-webcomponent.min.js"></script>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Quick Start
|
|
30
|
+
|
|
31
|
+
### Vanilla JavaScript
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<!DOCTYPE html>
|
|
35
|
+
<html>
|
|
36
|
+
<head>
|
|
37
|
+
<script src="node_modules/chat-component/dist/delachat-webcomponent.min.js"></script>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
<dela-chat
|
|
41
|
+
api-url="https://api.company.com"
|
|
42
|
+
session-uid="your-session-uid"
|
|
43
|
+
datasource="EPMSCA"
|
|
44
|
+
product-id="200"
|
|
45
|
+
token="your-token">
|
|
46
|
+
</dela-chat>
|
|
47
|
+
|
|
48
|
+
<script>
|
|
49
|
+
const chat = document.querySelector('dela-chat');
|
|
50
|
+
|
|
51
|
+
chat.addEventListener('message-sent', (e) => {
|
|
52
|
+
console.log('User sent:', e.detail.message);
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
chat.addEventListener('message-received', (e) => {
|
|
56
|
+
console.log('AI replied:', e.detail.message);
|
|
57
|
+
});
|
|
58
|
+
</script>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### React
|
|
64
|
+
|
|
65
|
+
```jsx
|
|
66
|
+
import 'chat-component';
|
|
67
|
+
import { useRef, useEffect } from 'react';
|
|
68
|
+
|
|
69
|
+
function ChatWidget({ sessionUid, token }) {
|
|
70
|
+
const chatRef = useRef(null);
|
|
71
|
+
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
const chat = chatRef.current;
|
|
74
|
+
|
|
75
|
+
const handleMessage = (e) => {
|
|
76
|
+
console.log('Message sent:', e.detail.message);
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
chat.addEventListener('message-sent', handleMessage);
|
|
80
|
+
return () => chat.removeEventListener('message-sent', handleMessage);
|
|
81
|
+
}, []);
|
|
82
|
+
|
|
83
|
+
return (
|
|
84
|
+
<dela-chat
|
|
85
|
+
ref={chatRef}
|
|
86
|
+
api-url="https://api.company.com"
|
|
87
|
+
session-uid={sessionUid}
|
|
88
|
+
datasource="EPMSCA"
|
|
89
|
+
product-id="200"
|
|
90
|
+
token={token}
|
|
91
|
+
/>
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Vue
|
|
97
|
+
|
|
98
|
+
```vue
|
|
99
|
+
<template>
|
|
100
|
+
<dela-chat
|
|
101
|
+
:api-url="apiUrl"
|
|
102
|
+
:session-uid="sessionUid"
|
|
103
|
+
:datasource="datasource"
|
|
104
|
+
:product-id="productId"
|
|
105
|
+
:token="token"
|
|
106
|
+
@message-sent="handleMessageSent"
|
|
107
|
+
/>
|
|
108
|
+
</template>
|
|
109
|
+
|
|
110
|
+
<script>
|
|
111
|
+
import 'chat-component';
|
|
112
|
+
|
|
113
|
+
export default {
|
|
114
|
+
props: ['sessionUid', 'token'],
|
|
115
|
+
data() {
|
|
116
|
+
return {
|
|
117
|
+
apiUrl: 'https://api.company.com',
|
|
118
|
+
datasource: 'EPMSCA',
|
|
119
|
+
productId: 200
|
|
120
|
+
};
|
|
121
|
+
},
|
|
122
|
+
methods: {
|
|
123
|
+
handleMessageSent(e) {
|
|
124
|
+
console.log('Sent:', e.detail.message);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
</script>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Angular
|
|
132
|
+
|
|
133
|
+
```typescript
|
|
134
|
+
import { Component, ViewChild, ElementRef, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
135
|
+
import 'chat-component';
|
|
136
|
+
|
|
137
|
+
@Component({
|
|
138
|
+
selector: 'app-chat',
|
|
139
|
+
template: `
|
|
140
|
+
<dela-chat #chat
|
|
141
|
+
[attr.api-url]="apiUrl"
|
|
142
|
+
[attr.session-uid]="sessionUid"
|
|
143
|
+
[attr.datasource]="datasource"
|
|
144
|
+
[attr.product-id]="productId"
|
|
145
|
+
[attr.token]="token">
|
|
146
|
+
</dela-chat>
|
|
147
|
+
`,
|
|
148
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
|
149
|
+
})
|
|
150
|
+
export class ChatComponent implements AfterViewInit {
|
|
151
|
+
@ViewChild('chat') chatElement: ElementRef;
|
|
152
|
+
|
|
153
|
+
apiUrl = 'https://api.company.com';
|
|
154
|
+
sessionUid = 'session-123';
|
|
155
|
+
datasource = 'EPMSCA';
|
|
156
|
+
productId = 200;
|
|
157
|
+
token = 'token-456';
|
|
158
|
+
|
|
159
|
+
ngAfterViewInit() {
|
|
160
|
+
const chat = this.chatElement.nativeElement;
|
|
161
|
+
chat.addEventListener('message-sent', (e: any) => {
|
|
162
|
+
console.log('Sent:', e.detail.message);
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## API Reference
|
|
169
|
+
|
|
170
|
+
### Attributes
|
|
171
|
+
|
|
172
|
+
| Attribute | Type | Required | Description |
|
|
173
|
+
|-----------|------|----------|-------------|
|
|
174
|
+
| `api-url` | string | Yes | API base URL |
|
|
175
|
+
| `session-uid` | string | Yes | PPM.Auth session UID |
|
|
176
|
+
| `datasource` | string | Yes | Datasource name |
|
|
177
|
+
| `product-id` | number | Yes | Product ID (e.g., 200) |
|
|
178
|
+
| `token` | string | Yes | Verification token |
|
|
179
|
+
| `theme` | 'light' \| 'dark' | No | Color theme (default: 'light') |
|
|
180
|
+
| `height` | string | No | Component height (default: '600px') |
|
|
181
|
+
| `width` | string | No | Component width (default: '100%') |
|
|
182
|
+
|
|
183
|
+
### Methods
|
|
184
|
+
|
|
185
|
+
```typescript
|
|
186
|
+
const chat = document.querySelector('dela-chat');
|
|
187
|
+
|
|
188
|
+
// Send a message programmatically
|
|
189
|
+
await chat.sendMessage('Hello AI!');
|
|
190
|
+
|
|
191
|
+
// Open chat
|
|
192
|
+
chat.open();
|
|
193
|
+
|
|
194
|
+
// Close chat
|
|
195
|
+
chat.close();
|
|
196
|
+
|
|
197
|
+
// Clear history
|
|
198
|
+
chat.clearHistory();
|
|
199
|
+
|
|
200
|
+
// Reload history from server
|
|
201
|
+
await chat.loadHistory();
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Events
|
|
205
|
+
|
|
206
|
+
```typescript
|
|
207
|
+
const chat = document.querySelector('dela-chat');
|
|
208
|
+
|
|
209
|
+
// Component is ready
|
|
210
|
+
chat.addEventListener('ready', () => {
|
|
211
|
+
console.log('Chat ready');
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
// User sent a message
|
|
215
|
+
chat.addEventListener('message-sent', (e) => {
|
|
216
|
+
console.log('User sent:', e.detail.message);
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
// AI sent a response
|
|
220
|
+
chat.addEventListener('message-received', (e) => {
|
|
221
|
+
console.log('AI replied:', e.detail.message);
|
|
222
|
+
});
|
|
223
|
+
|
|
224
|
+
// An error occurred
|
|
225
|
+
chat.addEventListener('error', (e) => {
|
|
226
|
+
console.error('Error:', e.detail.error);
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
// Chat was closed
|
|
230
|
+
chat.addEventListener('close', () => {
|
|
231
|
+
console.log('Chat closed');
|
|
232
|
+
});
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
## WinForms / WPF Integration
|
|
236
|
+
|
|
237
|
+
```csharp
|
|
238
|
+
using Microsoft.Web.WebView2.WinForms;
|
|
239
|
+
|
|
240
|
+
public class ChatForm : Form
|
|
241
|
+
{
|
|
242
|
+
private WebView2 webView;
|
|
243
|
+
|
|
244
|
+
private async void LoadChat()
|
|
245
|
+
{
|
|
246
|
+
webView = new WebView2 { Dock = DockStyle.Fill };
|
|
247
|
+
this.Controls.Add(webView);
|
|
248
|
+
|
|
249
|
+
await webView.EnsureCoreWebView2Async();
|
|
250
|
+
|
|
251
|
+
// Load HTML with component
|
|
252
|
+
string html = @"
|
|
253
|
+
<!DOCTYPE html>
|
|
254
|
+
<html>
|
|
255
|
+
<head>
|
|
256
|
+
<script src='https://cdn.company.com/delachat/v1.0.0/delachat-webcomponent.min.js'></script>
|
|
257
|
+
</head>
|
|
258
|
+
<body style='margin: 0'>
|
|
259
|
+
<dela-chat id='chat'
|
|
260
|
+
api-url='https://api.company.com'
|
|
261
|
+
datasource='EPMSCA'
|
|
262
|
+
product-id='200'
|
|
263
|
+
height='100vh'>
|
|
264
|
+
</dela-chat>
|
|
265
|
+
</body>
|
|
266
|
+
</html>";
|
|
267
|
+
|
|
268
|
+
webView.NavigateToString(html);
|
|
269
|
+
|
|
270
|
+
// Set session after load
|
|
271
|
+
webView.NavigationCompleted += async (s, e) =>
|
|
272
|
+
{
|
|
273
|
+
await webView.ExecuteScriptAsync($@"
|
|
274
|
+
const chat = document.getElementById('chat');
|
|
275
|
+
chat.setAttribute('session-uid', '{sessionUid}');
|
|
276
|
+
chat.setAttribute('token', '{token}');
|
|
277
|
+
");
|
|
278
|
+
};
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
## Browser Support
|
|
284
|
+
|
|
285
|
+
- Chrome/Edge 79+
|
|
286
|
+
- Firefox 63+
|
|
287
|
+
- Safari 12.1+
|
|
288
|
+
- Opera 66+
|
|
289
|
+
|
|
290
|
+
All modern browsers that support Custom Elements v1 and Shadow DOM.
|
|
291
|
+
|
|
292
|
+
## License
|
|
293
|
+
|
|
294
|
+
PROPRIETARY - Copyright © Deltek, Inc.
|
|
295
|
+
|
|
296
|
+
## Support
|
|
297
|
+
|
|
298
|
+
For issues and questions, contact Deltek support or file an issue in the repository.
|