@techhalo/chat 1.0.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 +739 -0
- package/dist/halo-chat.es.js +385 -0
- package/dist/halo-chat.es.js.map +1 -0
- package/dist/halo-chat.umd.js +385 -0
- package/dist/halo-chat.umd.js.map +1 -0
- package/package.json +67 -0
- package/src/types/halochat.d.ts +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,739 @@
|
|
|
1
|
+
# TechHalo - AI-Powered Embeddable Chat Widget
|
|
2
|
+
|
|
3
|
+
[](https://www.typescriptlang.org/)
|
|
4
|
+
[](https://svelte.dev/)
|
|
5
|
+
[](https://vitejs.dev/)
|
|
6
|
+
[](https://tailwindcss.com/)
|
|
7
|
+
|
|
8
|
+
TechHalo is an intelligent, embeddable chat widget platform that provides AI-powered customer support and specialized technical assistance. Built with modern web technologies, it offers seamless integration into any website while delivering advanced conversational AI capabilities and specialized tools like the AI Part Finder for industrial applications.
|
|
9
|
+
|
|
10
|
+
## 🚀 Features
|
|
11
|
+
|
|
12
|
+
### Core Chat Functionality
|
|
13
|
+
- **Real-time AI Conversations** - Streaming responses with WebSocket communication
|
|
14
|
+
- **Session Management** - Persistent chat history and conversation continuity
|
|
15
|
+
- **Markdown Support** - Rich text formatting with code highlighting
|
|
16
|
+
- **Voice Integration** - ElevenLabs voice synthesis support
|
|
17
|
+
- **YouTube Embedding** - Automatic video link detection and embedding
|
|
18
|
+
- **Rating System** - User feedback and response rating
|
|
19
|
+
- **Responsive Design** - Mobile-first, adaptive UI
|
|
20
|
+
|
|
21
|
+
### Advanced Features
|
|
22
|
+
- **AI Part Finder** - Specialized tool for finding industrial parts and machinery components
|
|
23
|
+
- **Eligibility Check System** - Healthcare insurance eligibility verification with multiple input methods
|
|
24
|
+
- **Progressive Search** - Context-aware search with intelligent filtering
|
|
25
|
+
- **Schematics Integration** - Visual part identification and documentation
|
|
26
|
+
- **Knowledge Base Integration** - Project-specific information retrieval
|
|
27
|
+
- **Modal System** - Flexible, customizable modal components for various use cases
|
|
28
|
+
- **Data Security** - Automatic masking of sensitive information (SSN, credit cards, emails, phone numbers)
|
|
29
|
+
- **Multi-language Support** - Internationalization ready
|
|
30
|
+
- **Custom Theming** - Flexible styling and branding options
|
|
31
|
+
|
|
32
|
+
### Enterprise Features
|
|
33
|
+
- **Project-based Configuration** - Multi-tenant architecture
|
|
34
|
+
- **Governance Rules** - Compliance and content moderation
|
|
35
|
+
- **Contextual Notifications** - Smart user alerts and acknowledgments
|
|
36
|
+
- **Analytics Integration** - Conversation tracking and insights
|
|
37
|
+
- **Custom Positioning** - Flexible widget placement options
|
|
38
|
+
|
|
39
|
+
## 📦 Installation
|
|
40
|
+
|
|
41
|
+
### NPM Installation
|
|
42
|
+
```bash
|
|
43
|
+
npm install techhalo
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### CDN Integration
|
|
47
|
+
```html
|
|
48
|
+
<!-- Include the widget script -->
|
|
49
|
+
<script src="https://cdn.jsdelivr.net/npm/techhalo@latest/dist/halo-chat.umd.js"></script>
|
|
50
|
+
|
|
51
|
+
<!-- Add the widget to your page -->
|
|
52
|
+
<halo-chat project_id="your-project-id" position="bottom-right"></halo-chat>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Manual Installation
|
|
56
|
+
```bash
|
|
57
|
+
# Clone the repository
|
|
58
|
+
git clone https://github.com/your-org/techhalo.git
|
|
59
|
+
cd techhalo/techhaloembed
|
|
60
|
+
|
|
61
|
+
# Install dependencies
|
|
62
|
+
npm install
|
|
63
|
+
# or
|
|
64
|
+
pnpm install
|
|
65
|
+
# or
|
|
66
|
+
yarn install
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 🔧 Quick Start
|
|
70
|
+
|
|
71
|
+
### Basic Integration
|
|
72
|
+
```html
|
|
73
|
+
<!DOCTYPE html>
|
|
74
|
+
<html>
|
|
75
|
+
<head>
|
|
76
|
+
<title>My Website</title>
|
|
77
|
+
</head>
|
|
78
|
+
<body>
|
|
79
|
+
<!-- Your website content -->
|
|
80
|
+
|
|
81
|
+
<!-- TechHalo Chat Widget -->
|
|
82
|
+
<halo-chat
|
|
83
|
+
project_id="3a3a382678"
|
|
84
|
+
position="bottom-right">
|
|
85
|
+
</halo-chat>
|
|
86
|
+
|
|
87
|
+
<script src="https://cdn.jsdelivr.net/npm/techhalo@latest/dist/halo-chat.umd.js"></script>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### React Integration
|
|
93
|
+
```jsx
|
|
94
|
+
import { useEffect } from 'react';
|
|
95
|
+
|
|
96
|
+
function App() {
|
|
97
|
+
useEffect(() => {
|
|
98
|
+
// Load the TechHalo script
|
|
99
|
+
const script = document.createElement('script');
|
|
100
|
+
script.src = 'https://cdn.jsdelivr.net/npm/techhalo@latest/dist/halo-chat.umd.js';
|
|
101
|
+
script.async = true;
|
|
102
|
+
document.body.appendChild(script);
|
|
103
|
+
|
|
104
|
+
return () => {
|
|
105
|
+
document.body.removeChild(script);
|
|
106
|
+
};
|
|
107
|
+
}, []);
|
|
108
|
+
|
|
109
|
+
return (
|
|
110
|
+
<div>
|
|
111
|
+
{/* Your React app */}
|
|
112
|
+
<halo-chat
|
|
113
|
+
project_id="your-project-id"
|
|
114
|
+
position="bottom-right"
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Vue.js Integration
|
|
122
|
+
```vue
|
|
123
|
+
<template>
|
|
124
|
+
<div>
|
|
125
|
+
<!-- Your Vue app -->
|
|
126
|
+
<halo-chat
|
|
127
|
+
:project_id="projectId"
|
|
128
|
+
position="bottom-right"
|
|
129
|
+
/>
|
|
130
|
+
</div>
|
|
131
|
+
</template>
|
|
132
|
+
|
|
133
|
+
<script>
|
|
134
|
+
export default {
|
|
135
|
+
data() {
|
|
136
|
+
return {
|
|
137
|
+
projectId: 'your-project-id'
|
|
138
|
+
};
|
|
139
|
+
},
|
|
140
|
+
mounted() {
|
|
141
|
+
const script = document.createElement('script');
|
|
142
|
+
script.src = 'https://cdn.jsdelivr.net/npm/techhalo@latest/dist/halo-chat.umd.js';
|
|
143
|
+
script.async = true;
|
|
144
|
+
document.body.appendChild(script);
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
</script>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
## ⚙️ Configuration
|
|
151
|
+
|
|
152
|
+
### Widget Attributes
|
|
153
|
+
| Attribute | Type | Default | Description |
|
|
154
|
+
|-----------|------|---------|-------------|
|
|
155
|
+
| `project_id` | string | **required** | Unique identifier for your project |
|
|
156
|
+
| `position` | string | `bottom-right` | Widget position: `bottom-right`, `bottom-left`, `top-right`, `top-left` |
|
|
157
|
+
| `partFinder` | boolean | `false` | Enable AI Part Finder functionality |
|
|
158
|
+
| `eligibilityCheck` | boolean | `false` | Enable Eligibility Check system for healthcare applications |
|
|
159
|
+
| `theme` | string | `default` | Theme variant: `default`, `halo`, `boatbot`, or custom theme name |
|
|
160
|
+
|
|
161
|
+
### Environment Configuration
|
|
162
|
+
The widget connects to the following endpoints by default:
|
|
163
|
+
|
|
164
|
+
```typescript
|
|
165
|
+
export const environment = {
|
|
166
|
+
production: true,
|
|
167
|
+
baseUrl: "https://apistagingcanyon.pilgrim.team",
|
|
168
|
+
socketUrl: "wss://aigateway.thehaloplatform.net/ws/core/chat",
|
|
169
|
+
aiServerUrl: "https://aigateway.thehaloplatform.net",
|
|
170
|
+
aiPartFinderUrl: "https://apipartfinder.pilgrim.team"
|
|
171
|
+
};
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Custom Styling
|
|
175
|
+
The widget uses CSS custom properties for theming:
|
|
176
|
+
|
|
177
|
+
```css
|
|
178
|
+
halo-chat {
|
|
179
|
+
--halo-primary-color: #007acc;
|
|
180
|
+
--halo-background-color: #ffffff;
|
|
181
|
+
--halo-text-color: #333333;
|
|
182
|
+
--halo-border-radius: 8px;
|
|
183
|
+
--halo-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
184
|
+
}
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## 🔨 Development
|
|
188
|
+
|
|
189
|
+
### Prerequisites
|
|
190
|
+
- Node.js 18+ and npm/pnpm/yarn
|
|
191
|
+
- Modern browser with ES2020+ support
|
|
192
|
+
|
|
193
|
+
### Development Setup
|
|
194
|
+
```bash
|
|
195
|
+
# Clone and install
|
|
196
|
+
git clone https://github.com/your-org/techhalo.git
|
|
197
|
+
cd techhalo/techhaloembed
|
|
198
|
+
pnpm install
|
|
199
|
+
|
|
200
|
+
# Start development server
|
|
201
|
+
pnpm dev
|
|
202
|
+
|
|
203
|
+
# The widget will be available at http://localhost:3000
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
### Project Structure
|
|
207
|
+
```
|
|
208
|
+
techhaloembed/
|
|
209
|
+
├── src/
|
|
210
|
+
│ ├── chat-system/ # Core chat functionality
|
|
211
|
+
│ │ ├── chat-system.svelte # Main chat component with global styles
|
|
212
|
+
│ │ ├── chat-service.ts # API communication
|
|
213
|
+
│ │ ├── chat-stream-service.ts # WebSocket handling
|
|
214
|
+
│ │ ├── project-service.ts # Project management
|
|
215
|
+
│ │ ├── conversation-service.ts # Conversation handling
|
|
216
|
+
│ │ ├── url-parser-service.ts # URL parsing utilities
|
|
217
|
+
│ │ └── rating.svelte # Response rating component
|
|
218
|
+
│ ├── components/ # Reusable components
|
|
219
|
+
│ │ ├── AI_part_finder.svelte # Part finder tool
|
|
220
|
+
│ │ ├── EligibilityCheck.svelte # Healthcare eligibility system
|
|
221
|
+
│ │ ├── Modal.svelte # Flexible modal component
|
|
222
|
+
│ │ ├── Loading.svelte # Loading states
|
|
223
|
+
│ │ ├── Pills.svelte # UI pill components
|
|
224
|
+
│ │ ├── ProgressiveSearch.svelte # Advanced search interface
|
|
225
|
+
│ │ ├── SystemDisplay.svelte # System information display
|
|
226
|
+
│ │ └── schematics.svelte # Technical schematics viewer
|
|
227
|
+
│ ├── assets/ # Static assets
|
|
228
|
+
│ │ ├── images/ # Icons and graphics
|
|
229
|
+
│ │ └── json/ # Configuration files
|
|
230
|
+
│ ├── environment/ # Environment configuration
|
|
231
|
+
│ ├── store/ # State management
|
|
232
|
+
│ │ ├── step.ts # Step-based workflow state
|
|
233
|
+
│ │ └── themeStore.ts # Theme management
|
|
234
|
+
│ ├── themes/ # Theme configuration
|
|
235
|
+
│ │ └── themeStore.svelte # Theme switching component
|
|
236
|
+
│ ├── types/ # TypeScript definitions
|
|
237
|
+
│ │ └── halochat.d.ts # Chat system type definitions
|
|
238
|
+
│ ├── utils/ # Utility functions
|
|
239
|
+
│ │ └── createConversationType.ts # Conversation utilities
|
|
240
|
+
│ └── plugins/ # Plugin integrations
|
|
241
|
+
│ └── halo-plugin-integration.ts # Plugin system
|
|
242
|
+
├── demo/ # Demo implementation
|
|
243
|
+
├── dist/ # Built files
|
|
244
|
+
└── test/ # Test files
|
|
245
|
+
├── embed.html # Basic embedding test
|
|
246
|
+
└── plugin-integration-test.html # Plugin testing
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### Build Commands
|
|
250
|
+
```bash
|
|
251
|
+
# Development server
|
|
252
|
+
pnpm dev
|
|
253
|
+
|
|
254
|
+
# Build for production
|
|
255
|
+
pnpm build
|
|
256
|
+
|
|
257
|
+
# Build Svelte components only
|
|
258
|
+
pnpm build:svelte
|
|
259
|
+
|
|
260
|
+
# Type checking
|
|
261
|
+
pnpm check
|
|
262
|
+
|
|
263
|
+
# Preview production build
|
|
264
|
+
pnpm preview
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
### Build Output
|
|
268
|
+
The build process generates:
|
|
269
|
+
- `dist/halo-chat.es.js` - ES module for npm
|
|
270
|
+
- `dist/halo-chat.umd.js` - UMD build for browsers
|
|
271
|
+
- Source maps and TypeScript declarations
|
|
272
|
+
|
|
273
|
+
## 🤖 AI Part Finder
|
|
274
|
+
|
|
275
|
+
The AI Part Finder is a specialized feature for industrial and manufacturing applications:
|
|
276
|
+
|
|
277
|
+
### Features
|
|
278
|
+
- **Model Selection** - Choose from extensive equipment database
|
|
279
|
+
- **System Type Classification** - Categorize parts by system type
|
|
280
|
+
- **Intelligent Search** - AI-powered part identification
|
|
281
|
+
- **Schematics Integration** - Visual part location and specifications
|
|
282
|
+
- **Progressive Filtering** - Narrow down results step by step
|
|
283
|
+
|
|
284
|
+
### Enabling Part Finder
|
|
285
|
+
```html
|
|
286
|
+
<halo-chat
|
|
287
|
+
project_id="your-project-id"
|
|
288
|
+
position="bottom-right"
|
|
289
|
+
partFinder="true">
|
|
290
|
+
</halo-chat>
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
### Integration with External Systems
|
|
294
|
+
The Part Finder integrates with:
|
|
295
|
+
- Equipment manufacturer databases
|
|
296
|
+
- Parts catalogs and inventory systems
|
|
297
|
+
- Schematic and documentation repositories
|
|
298
|
+
- Pricing and availability APIs
|
|
299
|
+
|
|
300
|
+
## 🏥 Eligibility Check System
|
|
301
|
+
|
|
302
|
+
The Eligibility Check System is a specialized healthcare feature designed for insurance verification and patient eligibility management:
|
|
303
|
+
|
|
304
|
+
### Features
|
|
305
|
+
- **Multiple Input Methods** - Support for three verification approaches:
|
|
306
|
+
- Policy Number (9 digits) - Fastest verification method
|
|
307
|
+
- Patient Name + Date of Birth - Standard verification
|
|
308
|
+
- Patient Name + Last 4 SSN digits - Alternative verification
|
|
309
|
+
- **Smart Form Validation** - Real-time input validation with visual feedback
|
|
310
|
+
- **Green Border Highlighting** - Intelligent visual cues showing related fields
|
|
311
|
+
- **Requirement Pills** - Dynamic status indicators for different verification methods
|
|
312
|
+
- **Results Management** - Comprehensive table with sorting, filtering, and export capabilities
|
|
313
|
+
- **Data Persistence** - Local storage for completed eligibility checks
|
|
314
|
+
- **CSV Export** - Download eligibility results for record keeping
|
|
315
|
+
- **Confirmation Modals** - Safety measures to prevent accidental data loss
|
|
316
|
+
|
|
317
|
+
### Enabling Eligibility Check
|
|
318
|
+
```html
|
|
319
|
+
<halo-chat
|
|
320
|
+
project_id="your-project-id"
|
|
321
|
+
position="bottom-right"
|
|
322
|
+
eligibilityCheck="true">
|
|
323
|
+
</halo-chat>
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
### Eligibility Check Workflow
|
|
327
|
+
1. **Input Selection** - Choose verification method based on available information
|
|
328
|
+
2. **Data Entry** - Fill required fields with smart validation
|
|
329
|
+
3. **Real-time Feedback** - Visual indicators guide the user through the process
|
|
330
|
+
4. **Eligibility Verification** - Submit for processing with loading states
|
|
331
|
+
5. **Results Display** - View detailed eligibility information
|
|
332
|
+
6. **Data Management** - Export, edit, or delete results as needed
|
|
333
|
+
|
|
334
|
+
### Input Validation Rules
|
|
335
|
+
- **Policy Number**: Exactly 9 digits, numeric only
|
|
336
|
+
- **Patient Name**: Letters and spaces only, first and last name required
|
|
337
|
+
- **Date of Birth**: Standard date format (YYYY-MM-DD)
|
|
338
|
+
- **SSN Last 4**: Exactly 4 digits, numeric only
|
|
339
|
+
|
|
340
|
+
### Security Features
|
|
341
|
+
- **Data Masking** - Sensitive information is automatically protected
|
|
342
|
+
- **Local Storage Only** - No sensitive data transmitted unnecessarily
|
|
343
|
+
- **Input Sanitization** - All inputs are validated and sanitized
|
|
344
|
+
- **Session Isolation** - Each session maintains separate data contexts
|
|
345
|
+
|
|
346
|
+
### Integration with Chat System
|
|
347
|
+
The eligibility check system integrates seamlessly with the chat interface:
|
|
348
|
+
- **Natural Language Processing** - Extract eligibility information from chat messages
|
|
349
|
+
- **Auto-population** - Pre-fill forms from conversation context
|
|
350
|
+
- **Contextual Responses** - AI provides guidance based on eligibility status
|
|
351
|
+
- **Workflow Integration** - Smooth transitions between chat and eligibility tools
|
|
352
|
+
|
|
353
|
+
## 🪟 Modal System
|
|
354
|
+
|
|
355
|
+
TechHalo includes a comprehensive modal system for displaying content, forms, and interactive elements:
|
|
356
|
+
|
|
357
|
+
### Modal Features
|
|
358
|
+
- **Flexible Positioning** - Multiple positioning options (center, corners, custom)
|
|
359
|
+
- **Customizable Styling** - Full control over appearance, colors, and dimensions
|
|
360
|
+
- **Animation Support** - Smooth entrance and exit animations
|
|
361
|
+
- **Responsive Design** - Mobile-friendly with adaptive layouts
|
|
362
|
+
- **Accessibility** - ARIA compliance and keyboard navigation
|
|
363
|
+
- **Backdrop Control** - Configurable backdrop behavior and styling
|
|
364
|
+
- **Close Button Options** - Multiple close button positions and styles
|
|
365
|
+
|
|
366
|
+
### Modal Usage
|
|
367
|
+
```typescript
|
|
368
|
+
import Modal from './components/Modal.svelte';
|
|
369
|
+
|
|
370
|
+
// Basic modal implementation
|
|
371
|
+
<Modal
|
|
372
|
+
bind:isOpen={showModal}
|
|
373
|
+
headerTitle="Eligibility Results"
|
|
374
|
+
width="800px"
|
|
375
|
+
height="600px"
|
|
376
|
+
>
|
|
377
|
+
<div slot="header">
|
|
378
|
+
<p>Additional header content</p>
|
|
379
|
+
</div>
|
|
380
|
+
|
|
381
|
+
<!-- Modal content -->
|
|
382
|
+
<EligibilityCheck />
|
|
383
|
+
|
|
384
|
+
<div slot="footer">
|
|
385
|
+
<button on:click={closeModal}>Close</button>
|
|
386
|
+
<button on:click={saveData}>Save</button>
|
|
387
|
+
</div>
|
|
388
|
+
</Modal>
|
|
389
|
+
```
|
|
390
|
+
|
|
391
|
+
### Modal Configuration Options
|
|
392
|
+
| Property | Type | Default | Description |
|
|
393
|
+
|----------|------|---------|-------------|
|
|
394
|
+
| `isOpen` | boolean | `false` | Controls modal visibility |
|
|
395
|
+
| `width` | string | `'600px'` | Modal width |
|
|
396
|
+
| `height` | string | `'auto'` | Modal height |
|
|
397
|
+
| `maxWidth` | string | `'90vw'` | Maximum width |
|
|
398
|
+
| `maxHeight` | string | `'90vh'` | Maximum height |
|
|
399
|
+
| `position` | string | `'center'` | Modal position |
|
|
400
|
+
| `backgroundColor` | string | `'#ffffff'` | Background color |
|
|
401
|
+
| `borderRadius` | string | `'12px'` | Border radius |
|
|
402
|
+
| `boxShadow` | string | `'0 25px 50px -12px rgba(0, 0, 0, 0.25)'` | Drop shadow |
|
|
403
|
+
| `backdropColor` | string | `'rgba(0, 0, 0, 0.5)'` | Backdrop color |
|
|
404
|
+
| `showCloseButton` | boolean | `true` | Show close button |
|
|
405
|
+
| `closeButtonPosition` | string | `'top-right'` | Close button position |
|
|
406
|
+
| `animationDuration` | string | `'300ms'` | Animation duration |
|
|
407
|
+
|
|
408
|
+
### Global CSS Architecture
|
|
409
|
+
|
|
410
|
+
The modal system, along with other components, uses a global CSS architecture for better bundle compatibility:
|
|
411
|
+
|
|
412
|
+
#### CSS Organization
|
|
413
|
+
- **Global Styles** - All component styles are centralized in `chat-system.svelte`
|
|
414
|
+
- **Unique Prefixes** - Each component uses unique class prefixes to prevent conflicts:
|
|
415
|
+
- `ChatModal_` - Modal system styles
|
|
416
|
+
- `eligibilitycheck_` - Eligibility check component styles
|
|
417
|
+
- **Responsive Design** - Mobile-first approach with comprehensive breakpoints
|
|
418
|
+
- **Theme Support** - CSS custom properties for easy theming
|
|
419
|
+
|
|
420
|
+
#### Benefits of Global CSS
|
|
421
|
+
- **Bundle Compatibility** - Styles are preserved during build process
|
|
422
|
+
- **Performance** - Reduced CSS duplication and smaller bundle sizes
|
|
423
|
+
- **Maintainability** - Centralized style management
|
|
424
|
+
- **Consistency** - Unified design system across components
|
|
425
|
+
|
|
426
|
+
## 🔐 Security & Privacy
|
|
427
|
+
|
|
428
|
+
### Data Protection
|
|
429
|
+
- **Sensitive Data Masking** - Automatic detection and masking of:
|
|
430
|
+
- Credit card numbers
|
|
431
|
+
- Social Security Numbers
|
|
432
|
+
- Email addresses
|
|
433
|
+
- Phone numbers
|
|
434
|
+
- **Secure Communication** - All data transmitted via HTTPS/WSS
|
|
435
|
+
- **Session Isolation** - Each session is encrypted and isolated
|
|
436
|
+
- **GDPR Compliance** - Built with privacy regulations in mind
|
|
437
|
+
|
|
438
|
+
### Content Security
|
|
439
|
+
- **Input Sanitization** - All user inputs are sanitized
|
|
440
|
+
- **XSS Prevention** - Protection against cross-site scripting
|
|
441
|
+
- **CSRF Protection** - Request validation and token verification
|
|
442
|
+
|
|
443
|
+
## 📡 API Integration
|
|
444
|
+
|
|
445
|
+
### WebSocket Events
|
|
446
|
+
The widget communicates via WebSocket for real-time functionality:
|
|
447
|
+
|
|
448
|
+
```typescript
|
|
449
|
+
// Message structure
|
|
450
|
+
interface Message {
|
|
451
|
+
id: string;
|
|
452
|
+
content: string;
|
|
453
|
+
role: 'user' | 'assistant';
|
|
454
|
+
timestamp: Date;
|
|
455
|
+
isLoading?: boolean;
|
|
456
|
+
streamStarted?: boolean;
|
|
457
|
+
streamEnded?: boolean;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
// Streaming message payload
|
|
461
|
+
interface SendMessagePayload {
|
|
462
|
+
user_message: string;
|
|
463
|
+
project_id: string;
|
|
464
|
+
session_id?: string | number;
|
|
465
|
+
}
|
|
466
|
+
```
|
|
467
|
+
|
|
468
|
+
### REST API Endpoints
|
|
469
|
+
- `GET /api/services/app/Projects/GetProjectForView` - Project configuration
|
|
470
|
+
- `GET /api/services/app/Projects/GetAllRulesFromParents` - Governance rules
|
|
471
|
+
- `GET /api/services/app/KnowledgeItems/GetKnowledgeItemsByProjectId` - Knowledge base
|
|
472
|
+
- `GET /api/services/app/Acknowledgement/GetContextualNotifications` - Notifications
|
|
473
|
+
|
|
474
|
+
## 🎨 Customization
|
|
475
|
+
|
|
476
|
+
### Theme Customization
|
|
477
|
+
Create custom themes by extending the base theme:
|
|
478
|
+
|
|
479
|
+
```css
|
|
480
|
+
.my-custom-theme {
|
|
481
|
+
--halo-primary-color: #ff6b35;
|
|
482
|
+
--halo-secondary-color: #f7931e;
|
|
483
|
+
--halo-background-color: #fefefe;
|
|
484
|
+
--halo-text-color: #2c3e50;
|
|
485
|
+
--halo-border-color: #ecf0f1;
|
|
486
|
+
--halo-border-radius: 12px;
|
|
487
|
+
--halo-font-family: 'Inter', sans-serif;
|
|
488
|
+
}
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
### Component Overrides
|
|
492
|
+
Customize specific components:
|
|
493
|
+
|
|
494
|
+
```css
|
|
495
|
+
halo-chat::part(chat-container) {
|
|
496
|
+
max-height: 600px;
|
|
497
|
+
width: 400px;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
halo-chat::part(message-bubble) {
|
|
501
|
+
border-radius: 18px;
|
|
502
|
+
padding: 12px 16px;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
halo-chat::part(input-field) {
|
|
506
|
+
border: 2px solid var(--halo-primary-color);
|
|
507
|
+
}
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
## 🧪 Testing
|
|
511
|
+
|
|
512
|
+
### Unit Tests
|
|
513
|
+
```bash
|
|
514
|
+
# Run unit tests
|
|
515
|
+
npm run test
|
|
516
|
+
|
|
517
|
+
# Run tests in watch mode
|
|
518
|
+
npm run test:watch
|
|
519
|
+
|
|
520
|
+
# Generate coverage report
|
|
521
|
+
npm run test:coverage
|
|
522
|
+
```
|
|
523
|
+
|
|
524
|
+
### Integration Testing
|
|
525
|
+
```bash
|
|
526
|
+
# Run integration tests
|
|
527
|
+
npm run test:integration
|
|
528
|
+
|
|
529
|
+
# Run end-to-end tests
|
|
530
|
+
npm run test:e2e
|
|
531
|
+
```
|
|
532
|
+
|
|
533
|
+
### Manual Testing
|
|
534
|
+
Use the demo files for manual testing:
|
|
535
|
+
- `demo/index.html` - Basic integration demo
|
|
536
|
+
- `test/embed.html` - Advanced feature testing
|
|
537
|
+
|
|
538
|
+
## 🚀 Deployment
|
|
539
|
+
|
|
540
|
+
### CDN Deployment
|
|
541
|
+
```bash
|
|
542
|
+
# Build for production
|
|
543
|
+
pnpm build
|
|
544
|
+
|
|
545
|
+
# Deploy to CDN (example with AWS S3)
|
|
546
|
+
aws s3 cp dist/ s3://your-cdn-bucket/techhalo/ --recursive
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
### NPM Publishing
|
|
550
|
+
```bash
|
|
551
|
+
# Prepare for publishing
|
|
552
|
+
pnpm prepack
|
|
553
|
+
|
|
554
|
+
# Publish to NPM
|
|
555
|
+
npm publish
|
|
556
|
+
```
|
|
557
|
+
|
|
558
|
+
### Self-hosted Deployment
|
|
559
|
+
```bash
|
|
560
|
+
# Build the project
|
|
561
|
+
pnpm build
|
|
562
|
+
|
|
563
|
+
# Serve the dist files from your web server
|
|
564
|
+
# Make sure to serve with proper CORS headers
|
|
565
|
+
```
|
|
566
|
+
|
|
567
|
+
## 📊 Analytics & Monitoring
|
|
568
|
+
|
|
569
|
+
### Built-in Analytics
|
|
570
|
+
The widget automatically tracks:
|
|
571
|
+
- Conversation initiation and duration
|
|
572
|
+
- User engagement metrics
|
|
573
|
+
- Response satisfaction ratings
|
|
574
|
+
- Feature usage statistics
|
|
575
|
+
- Error rates and performance metrics
|
|
576
|
+
|
|
577
|
+
### Custom Event Tracking
|
|
578
|
+
```javascript
|
|
579
|
+
// Listen for custom events
|
|
580
|
+
document.addEventListener('halo-chat-event', (event) => {
|
|
581
|
+
console.log('Chat event:', event.detail);
|
|
582
|
+
// Send to your analytics service
|
|
583
|
+
});
|
|
584
|
+
|
|
585
|
+
// Eligibility check events
|
|
586
|
+
document.addEventListener('eligibility-check-completed', (event) => {
|
|
587
|
+
console.log('Eligibility check result:', event.detail);
|
|
588
|
+
});
|
|
589
|
+
|
|
590
|
+
// Modal events
|
|
591
|
+
document.addEventListener('modal-opened', (event) => {
|
|
592
|
+
console.log('Modal opened:', event.detail.modalType);
|
|
593
|
+
});
|
|
594
|
+
```
|
|
595
|
+
|
|
596
|
+
### Advanced Integration Examples
|
|
597
|
+
|
|
598
|
+
#### Healthcare Application Integration
|
|
599
|
+
```html
|
|
600
|
+
<!-- Healthcare provider website -->
|
|
601
|
+
<halo-chat
|
|
602
|
+
project_id="healthcare-provider-123"
|
|
603
|
+
position="bottom-right"
|
|
604
|
+
eligibilityCheck="true"
|
|
605
|
+
theme="medical">
|
|
606
|
+
</halo-chat>
|
|
607
|
+
|
|
608
|
+
<script>
|
|
609
|
+
// Listen for eligibility results
|
|
610
|
+
document.addEventListener('eligibility-verified', (event) => {
|
|
611
|
+
const { patientInfo, coverage } = event.detail;
|
|
612
|
+
// Update patient record system
|
|
613
|
+
updatePatientEligibility(patientInfo, coverage);
|
|
614
|
+
});
|
|
615
|
+
</script>
|
|
616
|
+
```
|
|
617
|
+
|
|
618
|
+
#### Industrial/Manufacturing Integration
|
|
619
|
+
```html
|
|
620
|
+
<!-- Manufacturing company website -->
|
|
621
|
+
<halo-chat
|
|
622
|
+
project_id="manufacturing-corp-456"
|
|
623
|
+
position="bottom-left"
|
|
624
|
+
partFinder="true"
|
|
625
|
+
theme="industrial">
|
|
626
|
+
</halo-chat>
|
|
627
|
+
|
|
628
|
+
<script>
|
|
629
|
+
// Listen for part finder results
|
|
630
|
+
document.addEventListener('part-found', (event) => {
|
|
631
|
+
const { partNumber, specifications } = event.detail;
|
|
632
|
+
// Update inventory or ordering system
|
|
633
|
+
addToCart(partNumber, specifications);
|
|
634
|
+
});
|
|
635
|
+
</script>
|
|
636
|
+
```
|
|
637
|
+
|
|
638
|
+
#### Multi-Modal Application
|
|
639
|
+
```html
|
|
640
|
+
<!-- Application using both features -->
|
|
641
|
+
<halo-chat
|
|
642
|
+
project_id="multi-service-789"
|
|
643
|
+
position="bottom-right"
|
|
644
|
+
partFinder="true"
|
|
645
|
+
eligibilityCheck="true"
|
|
646
|
+
theme="corporate">
|
|
647
|
+
</halo-chat>
|
|
648
|
+
```
|
|
649
|
+
|
|
650
|
+
## 🤝 Contributing
|
|
651
|
+
|
|
652
|
+
### Development Workflow
|
|
653
|
+
1. Fork the repository
|
|
654
|
+
2. Create a feature branch: `git checkout -b feature/amazing-feature`
|
|
655
|
+
3. Make your changes and add tests
|
|
656
|
+
4. Ensure all tests pass: `pnpm test`
|
|
657
|
+
5. Commit your changes: `git commit -m 'Add amazing feature'`
|
|
658
|
+
6. Push to the branch: `git push origin feature/amazing-feature`
|
|
659
|
+
7. Open a Pull Request
|
|
660
|
+
|
|
661
|
+
### Code Standards
|
|
662
|
+
- Use TypeScript for all new code
|
|
663
|
+
- Follow the existing code style (Prettier configuration)
|
|
664
|
+
- Add unit tests for new functionality
|
|
665
|
+
- Update documentation as needed
|
|
666
|
+
- Ensure accessibility compliance
|
|
667
|
+
|
|
668
|
+
### Issues and Bugs
|
|
669
|
+
Please report issues using the GitHub issue tracker:
|
|
670
|
+
- Provide detailed reproduction steps
|
|
671
|
+
- Include browser and version information
|
|
672
|
+
- Add relevant error messages and logs
|
|
673
|
+
|
|
674
|
+
## 📝 Changelog
|
|
675
|
+
|
|
676
|
+
### Version 0.0.0 (Current)
|
|
677
|
+
#### New Features
|
|
678
|
+
- **Eligibility Check System** - Complete healthcare insurance verification system
|
|
679
|
+
- Multiple input methods (Policy, Name+DOB, Name+SSN)
|
|
680
|
+
- Real-time validation with visual feedback
|
|
681
|
+
- Smart form highlighting and requirement pills
|
|
682
|
+
- Results management with CSV export
|
|
683
|
+
- Data persistence and confirmation modals
|
|
684
|
+
- **Enhanced Modal System** - Flexible, reusable modal component
|
|
685
|
+
- Customizable positioning and styling
|
|
686
|
+
- Animation support and responsive design
|
|
687
|
+
- ARIA accessibility compliance
|
|
688
|
+
- Multiple close button positions
|
|
689
|
+
- **Global CSS Architecture** - Improved styling system
|
|
690
|
+
- Centralized styles for better bundle compatibility
|
|
691
|
+
- Unique class prefixes to prevent conflicts
|
|
692
|
+
- Performance optimizations
|
|
693
|
+
- **Advanced Chat Integration** - Enhanced AI capabilities
|
|
694
|
+
- Natural language processing for form pre-population
|
|
695
|
+
- Context-aware responses based on user interactions
|
|
696
|
+
- Improved conversation flow management
|
|
697
|
+
|
|
698
|
+
#### Core Features
|
|
699
|
+
- Core chat functionality with streaming responses
|
|
700
|
+
- AI Part Finder integration for industrial applications
|
|
701
|
+
- WebSocket real-time communication
|
|
702
|
+
- Embeddable widget architecture
|
|
703
|
+
- TypeScript support with comprehensive type definitions
|
|
704
|
+
- Modern build tooling with Vite and Rollup
|
|
705
|
+
- Responsive design with mobile optimization
|
|
706
|
+
- Theme system with multiple built-in themes
|
|
707
|
+
|
|
708
|
+
#### Technical Improvements
|
|
709
|
+
- Component-based architecture with Svelte 5
|
|
710
|
+
- State management with reactive stores
|
|
711
|
+
- Plugin system for extensibility
|
|
712
|
+
- Comprehensive error handling and validation
|
|
713
|
+
- Security enhancements with data masking
|
|
714
|
+
- Performance optimizations and bundle size reduction
|
|
715
|
+
|
|
716
|
+
## 📄 License
|
|
717
|
+
|
|
718
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
719
|
+
|
|
720
|
+
## 🙏 Acknowledgments
|
|
721
|
+
|
|
722
|
+
- Built with [Svelte 5](https://svelte.dev/) and [Vite](https://vitejs.dev/)
|
|
723
|
+
- UI components styled with [TailwindCSS](https://tailwindcss.com/)
|
|
724
|
+
- AI integration powered by [LangChain](https://langchain.com/)
|
|
725
|
+
- Voice synthesis by [ElevenLabs](https://elevenlabs.io/)
|
|
726
|
+
- Markdown parsing by [Marked](https://marked.js.org/)
|
|
727
|
+
- Code highlighting by [Highlight.js](https://highlightjs.org/)
|
|
728
|
+
|
|
729
|
+
## 📞 Support
|
|
730
|
+
|
|
731
|
+
For technical support and questions:
|
|
732
|
+
- Documentation: [Link to docs]
|
|
733
|
+
- Issues: [GitHub Issues](https://github.com/your-org/techhalo/issues)
|
|
734
|
+
- Email: support@techhalo.com
|
|
735
|
+
- Discord: [Community Server](https://discord.gg/techhalo)
|
|
736
|
+
|
|
737
|
+
---
|
|
738
|
+
|
|
739
|
+
**TechHalo** - Empowering intelligent conversations through AI-powered chat widgets.
|