@mypatientspace/chatbot-widget 1.0.32 → 1.0.34

package/README.md

@@ -83,12 +83,13 @@ yarn preview
 
 ## Web Integration
 
-### Minimal Setup (uses all defaults)
+### Minimal Setup
 ```html
 <script src="https://unpkg.com/@mypatientspace/chatbot-widget@latest/dist/mypatientspace-widget.umd.js"></script>
 <script>
   ChatbotWidget.init({
-    apiEndpoint: 'https://your-api.com/chat'
+    apiEndpoint: 'https://your-api.com/chat',
+    token: 'your-auth-token'
   });
 </script>
 ```
@@ -99,19 +100,57 @@ yarn preview
 <script>
   ChatbotWidget.init({
     apiEndpoint: 'https://your-api.com/chat',
-    apiKey: 'your-api-key',
+    token: 'your-auth-token',
     headerTitle: 'Health Support',
     greeting: 'Hi! How can I help?',
     brandingText: 'Powered by MyCompany',
-    brandingLogo: '/logo.png',
+    headerIcon: '/logo.png',
     fabIcon: '/avatar.png',
     placeholder: 'Ask me anything...',
     position: 'bottom-left',
-    quickActions: [
-      { id: '1', label: 'Help', icon: 'info', message: 'I need help' }
-    ],
+    quickActions: ['I need help', 'Book appointment'],
     theme: {
-      colors: { primary: '#ff6600' }
+      // All color properties are optional - only set what you want to change
+      colors: {
+        // Main colors
+        primary: '#ff6600',        // FAB button, links, main accent
+        primaryDark: '#cc5200',    // Hover states
+        secondary: '#2d3748',      // Header background
+        accent: '#4299e1',         // Secondary accent
+        accentLight: '#bee3f8',    // Light accent
+
+        // Status colors
+        success: '#48bb78',        // Success states
+        info: '#4299e1',           // Info states
+        error: '#f56565',          // Error states
+
+        // Background colors
+        background: '#ffffff',     // Chat window background
+        surface: '#f7fafc',        // Input/card backgrounds
+
+        // Text colors
+        text: '#2d3748',           // Primary text
+        textLight: '#718096',      // Secondary text, timestamps
+
+        // Message bubbles
+        userBubble: '#ff6600',     // User message background
+        userBubbleText: '#ffffff', // User message text
+        botBubble: '#edf2f7',      // Bot message background
+        botBubbleText: '#2d3748',  // Bot message text
+
+        // Borders
+        border: '#e2e8f0',         // Border color
+        borderLight: '#edf2f7',    // Light border
+
+        // Other
+        white: '#ffffff',          // White color
+        recording: '#f56565',      // Voice recording indicator
+      },
+
+      // Typography and shape
+      fontFamily: 'Inter, system-ui, sans-serif',
+      borderRadius: '8px',
+      shadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
     }
   });
 </script>
@@ -154,28 +193,27 @@ Embed the chat inside an existing element:
 </script>
 ```
 
-### Using embedMode
+### Using floatingMode
 
-Enable embedded styling without a specific container:
+Enable floating mode with FAB button (classic chatbot style):
 
 ```html
 <script>
   ChatbotWidget.init({
     apiEndpoint: 'https://your-api.com/chat',
-    embedMode: true
+    floatingMode: true
   });
 </script>
 ```
 
 ### Comparison
 
-| Feature | `containerSelector` | `embedMode: true` |
-|---------|---------------------|-------------------|
-| Container | Your element | Auto-created |
-| Sizing | Your CSS controls it | 100% of parent |
-| FAB button | Hidden | Hidden |
-| Chat visibility | Always open | Always open |
-| On destroy | Container preserved | Container removed |
+| Feature | Embedded (default) | `floatingMode: true` |
+|---------|-------------------|----------------------|
+| FAB button | Hidden | Shown |
+| Chat visibility | Always open | Opens on click |
+| Position | Fills container | Fixed bottom-right/left |
+| Sizing | 100% of parent | 380x520px |
 
 ## Mobile Integration
 
@@ -292,9 +330,92 @@ const ChatScreen = () => {
 };
 ```
 
-## Default Configuration
+## Configuration Reference
+
+### All Options
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `apiEndpoint` | `string` | No | Chat API endpoint URL (widget offline if not set) |
+| `token` | `string` | No | Auth token for API requests |
+| `sessionId` | `string` | No | Existing session ID to resume |
+| `assistantId` | `string` | No | Specific assistant ID to use |
+| `contextPatientId` | `string` | No | Patient context for the chat |
+| `loadHistory` | `boolean` | No | Load previous chat history (default: true) |
+| `theme` | `ThemeConfig` | No | Custom theme (see Theme Configuration below) |
+| `position` | `'bottom-right' \| 'bottom-left'` | No | FAB button position |
+| `containerSelector` | `string` | No | CSS selector for embedded container |
+| `floatingMode` | `boolean` | No | Show FAB button and floating chat (default: false) |
+| `greeting` | `string` | No | Initial bot greeting message |
+| `placeholder` | `string` | No | Input field placeholder text |
+| `headerTitle` | `string` | No | Chat window header title |
+| `headerSubtitle` | `string` | No | Chat window header subtitle |
+| `headerIcon` | `string` | No | Header icon image URL |
+| `fabIcon` | `string` | No | FAB button image URL |
+| `brandingText` | `string` | No | Footer branding text |
+| `quickActions` | `string[]` | No | Predefined quick action buttons (displayed as labels and sent as messages) |
+
+### Callbacks
+
+| Callback | Parameters | Description |
+|----------|------------|-------------|
+| `onOpen` | `()` | Called when chat window opens |
+| `onClose` | `()` | Called when chat window closes |
+| `onMessageSent` | `(message: Message)` | Called after user sends a message |
+| `onMessageReceived` | `(message: Message)` | Called after bot response completes |
+| `onQuickAction` | `(action: string)` | Called when quick action is clicked |
+| `onStreamChunk` | `(chunk: string)` | Called for each streamed response chunk |
+
+### Message Interface
+
+```typescript
+interface Message {
+  id: string;
+  content: string;
+  sender: 'user' | 'bot';
+  timestamp: Date;
+  status: 'sending' | 'sent' | 'error';
+  audioUrl?: string;  // Base64 audio data URL for TTS playback
+}
+```
+
+### ThemeConfig Interface
+
+```typescript
+interface ThemeConfig {
+  colors?: Partial<ThemeColors>;  // Any subset of theme colors
+  fontFamily?: string;
+  borderRadius?: string;
+  shadow?: string;
+}
+```
 
-When no value is provided, these defaults are used:
+### Available Theme Colors
+
+| Color | Default | Description |
+|-------|---------|-------------|
+| `primary` | `#00c2d1` | FAB button, links, main accent |
+| `primaryDark` | `#017992` | Hover states |
+| `secondary` | `#3c4d73` | Header background |
+| `accent` | `#33b1e6` | Secondary accent color |
+| `accentLight` | `#b8ebff` | Light accent |
+| `success` | `#00dec4` | Success states |
+| `info` | `#30d7ed` | Info states |
+| `background` | `#ffffff` | Chat window background |
+| `surface` | `#fdfefe` | Input/card backgrounds |
+| `text` | `#3c4d73` | Primary text |
+| `textLight` | `#6b7280` | Secondary text, timestamps |
+| `userBubble` | `#00c2d1` | User message background |
+| `userBubbleText` | `#ffffff` | User message text |
+| `botBubble` | `#e0f7fa` | Bot message background |
+| `botBubbleText` | `#3c4d73` | Bot message text |
+| `border` | `#d1d5db` | Border color |
+| `borderLight` | `#e5e7eb` | Light border |
+| `error` | `#ef4444` | Error states |
+| `white` | `#ffffff` | White color |
+| `recording` | `#ef4444` | Voice recording indicator |
+
+## Default Values
 
 | Option | Default Value |
 |--------|---------------|
@@ -302,11 +423,12 @@ When no value is provided, these defaults are used:
 | `greeting` | "Hello! Welcome to our healthcare support. How can I assist you today?" |
 | `placeholder` | "Type a message..." |
 | `brandingText` | "Developed by myPatientSpace" |
-| `brandingLogo` | https://web.mypatientspace.com/img/logo-symbol.png |
+| `headerIcon` | https://web.mypatientspace.com/img/logo-symbol.png |
 | `fabIcon` | https://web.mypatientspace.com/img/logo-symbol.png |
 | `position` | "bottom-right" |
-| `containerSelector` | undefined (floating mode) |
-| `embedMode` | false (auto-enabled when containerSelector is set) |
+| `loadHistory` | true |
+| `containerSelector` | undefined (creates container in body) |
+| `floatingMode` | false (embedded is default) |
 | `quickActions` | Book Appointment, Hours, Contact, Location |
 
 ## License